时间戳

首页 > 解决方案 > 鼠标事件名称

jquery - 鼠标事件名称

问题描述

您可能会发现这很简单……我只是不知道我要查找的事件的名称。

现在，我存储图像的宽度和高度。我在单击的位置存储图像的宽度和高度。

当“在特定 div 中停止按下单击按钮”时，我想做同样的事情，以便获得单击的 x,y 开始位置和单击的 x,y 结束位置，以便能够拥有所有构建的矩形位置。

这就是我现在所拥有的

$(document).on("click", "#img_to_deal_with", function(e){
    let maxH = $('#img_to_deal_with').height();
    let maxL = $('#img_to_deal_with').width();  
    let posX = e.pageX - this.offsetLeft;
    let posY = e.pageY - this.offsetTop;
    console.log("Height : " + maxH);
    console.log("Width : " + maxL);
    console.log("Current Height : "+ posY);
    console.log("Current Width :" + posX);
});

感谢你的协助

标签： jquery

解决方案

mousedown：当用户按下鼠标按钮时触发。
mouseup：当用户释放鼠标按钮时触发。
click：当同一元素上发生 mousedown 和 mouseup 事件时触发。
来源

因此，您可能希望将mousedown和mouseup中的单击分开：

$(document).on("mousedown", "#img_to_deal_with", function(e){
    let maxH = $('#img_to_deal_with').height();
    let maxL = $('#img_to_deal_with').width();  
    let posX = e.pageX - this.offsetLeft;
    let posY = e.pageY - this.offsetTop;
    console.log("Height : " + maxH);
    console.log("Width : " + maxL);
    console.log("Down Height : "+ posY);
    console.log("Down Width :" + posX);
}).on("mouseup", "#img_to_deal_with", function(e){
    let maxH = $('#img_to_deal_with').height();
    let maxL = $('#img_to_deal_with').width();  
    let posX = e.pageX - this.offsetLeft;
    let posY = e.pageY - this.offsetTop;
    console.log("Height : " + maxH);
    console.log("Width : " + maxL);
    console.log("Up Height : "+ posY);
    console.log("Up Width :" + posX);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="http://lorempixel.com/output/abstract-q-c-300-150-9.jpg" id="img_to_deal_with" draggable="false">

推荐阅读