JavaScript:mousebutton向下传播到图像，可以'；别让它停下来

我有一个项目来创建和拖动一个半透明的div在一个图像上，目的是让视觉突出显示图像的部分

注意，我使用jquery来完成大部分工作

这基本上是可行的，潜水艇拖得很好。但是，我还希望能够单击图像本身来创建这样的div，然后将其拖动

所以我的过程是：在图像上的mousebuttondown事件上，创建div并开始拖动。 然而，firefox正在向下解释这个鼠标按钮，并执行一些浏览器gui操作（chrome工作正常），尽管事件处理程序返回false以停止传播

我有一个JSFIDLE来说明（注意，它被简化为尽可能简单，所以显然有些东西需要改进可用性）

在其中，您可以看到图像顶部有一个黄色框。按下鼠标并拖动此框，它可以完美地拖动

但是，将鼠标移到黄色框外，它将创建一个类似的绿色div，其想法是，您可以将鼠标向下拖动，并在新的绿色div上获得相同的效果。但是，浏览器会干扰事件。试试看

我一直在用头撞砖墙，试图让浏览器停止观看活动，但毫无效果。所以你的帮助将不胜感激

代码非常简单：

beginDrag(e)  // event handler for mouse down
createBeginDrag(e) // Create a new div then call begin drag on that div
moveDrag(e) // event handler for mouse move to perform the drag
moveEnd(e)  // event handler for mouseup and mouseleave to end the drag

JSFIDLE的代码如下（注意这需要包括jquery）：

var-dragX，dragY；
var lastItemNum=1；
var lastItem=“#黄色”；
功能起点（e）{
dragX=e.clientX；dragY=e.clientY；
$（“#外部”）。在（'mousemove'，moveDrag）上；
$（“#外部”）。on（'mouseup'，endDrag）；
$（“#外部”）。在（“鼠标移动”，endDrag）；
$（'#log'）.append（'MD['+e.clientX+'，'+e.clientY+']->['+dragX+'，'+dragY+']）；
返回false；
}
函数createBeginDrag（e）{
lastItemNum++；
var html=“”；
$（“#外部”）.append（html）；
lastItem='#绿色'+lastItemNum；
初生子女（e）；
}
函数moveDrag（e）{
var deltaX=e.clientX-dragX；
var deltaY=e.clientY-dragY；
var offset=$（lastItem）.offset（）；
dragX=e.clientX；
dragY=e.clientY；
offset.top+=三角洲；
offset.left+=deltaX；
$（最后一项）。抵销（抵销）；
$（'#log'）.append（'MM['+e.clientX+'，'+e.clientY+']->['+dragX+'，'+dragY+']）；
返回false；
}
函数endDrag（e）{
移动阻力（e）；
$（“#外部”）.off（'mousemove'，moveDrag）；
$（“#外部”）.off（'mouseup'，endDrag）；
$（“#外部”）.off（“mouseleave”，endDrag）；
$（'#log'）.append（'ME['+e.clientX+'，'+e.clientY+']->['+dragX+'，'+dragY+']）；
返回false；
}    
$（文档）.ready（函数（）{
美元（“#黄色”）。在（'mousedown'，beginDrag）；
$（“#外部”）。on（'mousedown'，createBeginDrag）；
});
img{position:relative；top:0；left:0；}
#黄色{位置：绝对；
顶部：100px；左侧：300px；
宽度：100px；高度：100px；
背景色：黄色；不透明度：0.3；
浮动：左；
}
.green{位置：绝对位置；
顶部：100px；左侧：300px；
宽度：100px；高度：100px；
背景色：绿色；不透明度：0.3；
浮动：左；
}
#日志{font size:small；}
在单击事件中，您需要检查单击的目标是否是图像，如果不是简单的返回

function createBeginDrag(e) {
    if(e.target.nodeName!="IMG" && e.target.tagName!="IMG") return true;

注意：如果您希望通过单击并拖动绿色div来拖动它们，请更改

$("#yellow").on('mousedown',beginDrag);

到

并将您的鼠标拖动更改为

function moveDrag(e) {
    var deltaX = e.clientX - dragX;
    var deltaY = e.clientY - dragY;
    var target = $(e.target).hasClass("green")? $(e.target) : $(lastItem);
    var offset = target.offset();
    dragX = e.clientX;
    dragY = e.clientY;
    offset.top += deltaY;
    offset.left += deltaX;
    target.offset(offset);
    $('#log').append('MM[' + e.clientX + ',' + e.clientY + '] -> [' + dragX + ',' + dragY + ']   ');
    return false;
}

在这里发布代码，而不仅仅是您正在使用的函数调用。代码在JSFIDLE中，在那里查看代码似乎比在这个问题中发布更容易。链接会消失，用户不必去外部站点查看代码。好的，谢谢，我将按照您的建议发布代码…谢谢您的帮助Patrick，但这个解决方案仍然有点不可行。如果你转到图片上，鼠标向下移动，然后鼠标四处移动，firefox会显示一点禁止标志，div不会跟随光标。如果你用鼠标向上拖动，阻力会被抓住，而mousedown会再次拖动，但是最初的阻力有点混乱。你明白我在说什么吗？
function moveDrag(e) {
    var deltaX = e.clientX - dragX;
    var deltaY = e.clientY - dragY;
    var target = $(e.target).hasClass("green")? $(e.target) : $(lastItem);
    var offset = target.offset();
    dragX = e.clientX;
    dragY = e.clientY;
    offset.top += deltaY;
    offset.left += deltaX;
    target.offset(offset);
    $('#log').append('MM[' + e.clientX + ',' + e.clientY + '] -> [' + dragX + ',' + dragY + ']   ');
    return false;
}