Question

让绿色div嵌套在另一个红色div中。

假设下图中绿色框中心的鼠标事件

的值为clientX 30（红色框的宽度为100）

在RTL情况下，标记将像这样显示

与正常情况下的transform: translateX(-pos)相比，使用transform: translateX(pos)将绿框放置到新位置。

clientX仍将带有30的值吗？

Answer 1

即使在从右到左的模式下，也要从（-0，0）在左上角开始协调。

我想在质疑它之前，最好先编写一个简码并自己进行测试。

在从右到左模式下，

seat = []
with open('coba.csv', 'r', newline='') as csvfile:
    seating = csv.reader(csvfile)
    for line in seating:
        seat.append(line)

print("Buy seat ?")
answer_1 = input("Answer : ")
if answer_1 == "yes":
    answer_2 = input("Enter preferred seat: ")
    if answer_2 == "A1":
        row = 1
        column = 0
        seat[row][column] = "X"
        with open('coba.csv', 'w', newline='') as csvfile:
            writer = csv.writer(csvfile)
            writer.writerows(seat)
            for line in seat:
                print(' | '.join(line))

document.querySelector( "#inner" ).addEventListener( "click", e => console.log( e.clientX ) );

#outer {
  width: 100px;
  border: 1px solid red;
}

#inner {
  width: 30px;
  border: 1px solid green;
  height: 100px;
}

在从左到右模式下，

<!DOCTYPE html>
<html lang="en">
<body dir="rtl">
    <div id="outer">
        <div id="inner">
            
        </div>
    </div>
</body>
</html>

document.querySelector( "#inner" ).addEventListener( "click", e => console.log( e.clientX ) );

#outer {
  width: 100px;
  border: 1px solid red;
}

#inner {
  width: 30px;
  border: 1px solid green;
  height: 100px;
}

在RTL情况下，mouseEvent的clientx值将如何处理？

1 个答案: