我正在编写一个插件,当在 Canvas div 上单击鼠标时,它会创建一个选择选取框。到目前为止,我已经用代码中彼此相邻的 click()
和 mousemove()
事件编写了插件(我不知道有什么方法可以将事件嵌入其中其他事件)。但是当鼠标在点击之前移到 Canvas 上时,这就会成为一个问题。有谁知道如何通过单击来初始化 mousemove 处理程序?
这是我到目前为止编写的代码:
$.fn.createBox = function(id) {
$(id).css({
cursor:'crosshair'
});
$(id).click(function(e) {
var clickLocX = e.pageX;
var clickLocY = e.pageY;
$('<div>').attr({
'class':'newBox',
'ctr':'on'
})
.css({
top:clickLocY,
left:clickLocX
})
.appendTo(id);
});
//Mousemove must be initialized only AFTER the click. HOW TO DO THIS?
$(id).mousemove(function(e){
var XpageCoord = e.pageX;
var YpageCoord = e.pageY;
window.Xloc = XpageCoord;
window.Yloc = YpageCoord;
var boxOffset = $('.newBox').offset();
var boxHeight = YpageCoord - boxOffset.top;
var boxWidth = XpageCoord - boxOffset.left;
$('.newBox').css({
height:boxHeight + 'px',
width:boxWidth + 'px'
});
});
}
最佳答案
只需从 click
处理程序中设置 mousemove
处理程序,并使用标志来确定它是否已被设置以避免多次添加。
编辑:一个例子
assignedMoveHandler = false;
$(id).click(function(e) {
// other stuff...
if(!assignedMoveHandler) {
$(id).mousemove(function(e) {
// mouse move handling code...
});
assignedMoveHandler = true;
}
}
我在这里使用了一个你可能关心或不关心的全局变量,我查找了 jquery 对象两次,等等,所以它可以稍微清理一下,但这是一般的想法。当 click
处理程序触发时,您检查是否已分配 mousemove
处理程序。如果没有,请分配它。
关于javascript - 仅在单击后初始化 mousemove 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8495158/