Question

您可能会发现这很简单...我只是不知道我要寻找的活动的名称。

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

当“单击停止在特定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);
});

感谢您的帮助

Answer 1

鼠标按下：当用户按下鼠标按钮时触发。
鼠标：当用户释放鼠标按钮时触发。
点击：在同一元素上发生mousedown和mouseup事件时触发。 source

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

$(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">

鼠标事件名称

1 个答案: