mousedown(event) { console.log(event); console.log('div1.offsetX', event.offsetX); console.log('div1.offsetY', event.offsetY); let xy = (event.offsetX + ',' + event.offsetY) console.log('div1.xy', xy); this.points = '10, 10 ' + xy + ' 180, 10' }
时间: 2023-03-31 11:01:58 浏览: 56
这是一个关于 JavaScript 事件处理的问题,我可以回答。这段代码是在鼠标按下时触发的事件处理函数,它会输出事件对象 event,以及鼠标在 div1 元素内的偏移量 offsetX 和 offsetY。然后将这个偏移量与字符串拼接成一个坐标点 xy,并将其存储在 this.points 中。最后,将这个坐标点与两个固定点拼接成一个多边形。
相关问题
用原生js写法优化以下代码 function dragMoveX(container) { var flag; var downX; var scrollLeft; //鼠标按下 $(document.body).on("mousedown", container, function (event) { console.log('mousedown') flag = true; downX = event.clientX; scrollLeft = $(this).scrollLeft(); }); //鼠标移动 $(document).on("mousemove", function (event) { console.log('mousemove',flag,event.clientX) if (flag) { var moveX = event.clientX; var scrollX = moveX - downX; // console.log("moveX" + moveX); // console.log("scrollX" + scrollX); if (scrollX < 0 && scrollLeft > 0) { $(container).scrollLeft(scrollLeft - scrollX) } else { $(container).scrollLeft(scrollLeft - scrollX) } } }); //鼠标释放 $(document).on("mouseup", function () { console.log('mouseup') flag = false; }); /** * 注意:与 mouseout 事件不同,mouseleave 事件只有在鼠标指针离开被选元素时被触发,mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。 * 所以:如果mouseout的子元素存在溢出,并添加了超出加滚动,那么刚进入也会触发该事件,所以这里就不能使用。 * */ //鼠标移出元素 $(container).on("mouseleave", function (event) { console.log('mouseleave',event.pageX,document.body.offsetWidth) // flag = false; if (event.pageX < 0 || event.pageX > document.body.offsetWidth) { console.log('在元素上移出') flag = false; } }); }
可以使用原生JS改写该代码,如下所示:
```
function dragMoveX(container) {
let flag;
let downX;
let scrollLeft;
const body = document.body;
const containerEl = document.querySelector(container);
containerEl.addEventListener("mousedown", function(event) {
console.log("mousedown");
flag = true;
downX = event.clientX;
scrollLeft = this.scrollLeft;
});
body.addEventListener("mousemove", function(event) {
console.log("mousemove", flag, event.clientX);
if (flag) {
const moveX = event.clientX;
const scrollX = moveX - downX;
if (scrollX < 0 && scrollLeft > 0) {
containerEl.scrollLeft = scrollLeft - scrollX;
} else {
containerEl.scrollLeft = scrollLeft - scrollX;
}
}
});
body.addEventListener("mouseup", function() {
console.log("mouseup");
flag = false;
});
containerEl.addEventListener("mouseleave", function(event) {
console.log("mouseleave", event.pageX, body.offsetWidth);
if (event.pageX < 0 || event.pageX > body.offsetWidth) {
console.log("在元素上移出");
flag = false;
}
});
}
```
使用原生JS来绑定事件,而不是使用jQuery可以减少代码的依赖和加载时间,提高代码的执行效率。
event.originalEvent.touches和event.pageX不存在怎么获得
如果 `event.originalEvent.touches` 和 `event.pageX` 属性都不存在,那么可能是因为你的事件对象 `event` 不是鼠标事件或触摸事件。在这种情况下,你可以尝试使用其他属性或方法来获取页面上的X坐标。
首先,你可以尝试使用 `event.clientX` 和 `event.clientY` 属性来获取鼠标事件的页面坐标。这两个属性表示鼠标相对于浏览器窗口可视区域的坐标,而不是相对于整个页面的坐标。
```javascript
$("#flipbook").on("mousedown", function(event) {
var startX = event.clientX; // 鼠标事件的X坐标
console.log("startX:", startX);
});
```
如果你处理的是触摸事件,可以尝试使用 `event.originalEvent.changedTouches[0].clientX` 和 `event.originalEvent.changedTouches[0].clientY` 属性来获取触摸事件的页面坐标。和鼠标事件类似,这些属性表示触摸点相对于浏览器窗口可视区域的坐标。
```javascript
$("#flipbook").on("touchstart", function(event) {
var touch = event.originalEvent.changedTouches[0];
var startX = touch.clientX; // 触摸事件的X坐标
console.log("startX:", startX);
});
```
请注意,以上代码仅适用于获取相对于浏览器窗口可视区域的坐标。如果你需要获取相对于整个页面的坐标,你可能需要结合页面滚动的位置来计算。
如果以上方法仍然无法获取到所需的坐标信息,请提供更多关于你正在处理的事件类型和代码上下文的细节,以便我们给出更具体的解决方案。