代码之家 › 专栏 › 技术社区 › Anthony Kong

在RTL情况下,MouseeEvent的clientx值会发生什么变化?

html javascript

-3

Anthony Kong · 技术社区 · 6 年前

让我们说绿色 div div

让我们假设下图中绿色框中间的鼠标事件

有价值 clientX

在RTL情况下,标记将按如下方式显示

使用将绿色框放置到新位置 transform: translateX(-pos) transform: translateX(pos) 在正常情况下。

客户端 还有30的价值吗?

1 回复 | 直到 6 年前

Isitea 6 年前

即使在从右到左的模式下,从左上角开始与(0,0)协调。

我想你最好在提问之前,写一个简短的代码,自己测试一下。

在从右向左模式下,

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(“内部”).addEventListener(“单击”,e=>console.log(e.clientX));

#外{
宽度:100px;
边框:1px纯红;
}

#内在的{
宽度:30px;
高度:100px;
}

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

5 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

5 月前

Alex · 在轻量级中同时解构和不解构变量

5 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

5 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

5 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

user3472810 · Angular@Output/EventEmitter返回undefined

5 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

5 月前