Question

我有一个项目可以在图像上创建和拖动半透明div，目的是允许在视觉上突出显示图像的各个部分。

注意我在大多数情况下使用jquery。

这主要是工作，div很好。但是，我还希望能够点击图像本身来创建这样的div，然后将其拖动。

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

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

在其中，您会在图像顶部看到一个黄色框。鼠标按下并拖动此框，它完全拖动。

然而，鼠标按下黄色框外面，它会创建一个绿色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

http://jsfiddle.net/fraserorr/ty82Q/embedded/result/

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

＆＃13;

var dragX, dragY;
var lastItemNum = 1;
var lastItem = "#yellow";

function beginDrag(e) {
    dragX = e.clientX; dragY= e.clientY;
    $("#outer").on('mousemove', moveDrag);
    $("#outer").on('mouseup', endDrag);
    $("#outer").on("mouseleave", endDrag);
    $('#log').append('MD[' + e.clientX + ',' + e.clientY + '] -> [' + dragX + ',' + dragY + ']   ');
    return false;
}

function createBeginDrag(e) {
    lastItemNum++;
    var html = "<div class='green'";
    html += "id='green" + lastItemNum + "' "; 
    html += "style=";
    html += "'left:"+(e.clientX-50)+"px;";
    html += " top: "+(e.clientY-50)+"px;'";
    html += "></div>";
    $("#outer").append(html);
    lastItem = '#green' + lastItemNum;
    beginDrag(e);
}

function moveDrag(e) {
    var deltaX = e.clientX - dragX;
    var deltaY = e.clientY - dragY;
    var offset = $(lastItem).offset();
    dragX = e.clientX;
    dragY = e.clientY;
    offset.top += deltaY;
    offset.left += deltaX;
    $(lastItem).offset(offset);
    $('#log').append('MM[' + e.clientX + ',' + e.clientY + '] -> [' + dragX + ',' + dragY + ']   ');
    return false;
}

function endDrag(e) {
    moveDrag(e);
    $("#outer").off('mousemove', moveDrag);
    $("#outer").off('mouseup', endDrag);
    $("#outer").off("mouseleave", endDrag);
    $('#log').append('ME[' + e.clientX + ',' + e.clientY + '] -> [' + dragX + ',' + dragY + ']   ');
    return false;
}    

$(document).ready(function() {
    $("#yellow").on('mousedown', beginDrag);
    $("#outer").on('mousedown', createBeginDrag);
});

＆＃13;

img { position: relative; top: 0; left: 0; }
#yellow { position: absolute;
    top: 100px; left: 300px;
    width:100px; height:100px;
    background-color: yellow; opacity: 0.3;
    float: left;
}
.green { position: absolute;
    top: 100px; left: 300px;
    width:100px; height:100px;
    background-color: green; opacity: 0.3;
    float: left;
}
#log { font-size: small; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id='outer'>
    <img src='http://blogs.warwick.ac.uk/images/mhillebrandt/2007/02/21/venice_high_water.jpg?maxWidth=800&maxHeight=600'/>
    <div id='yellow'></div>
</div>
<div id='log'></div>

＆＃13;

Answer 1

在您的点击事件中，您需要检查点击的目标是否是图片，如果不是简单的返回

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

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

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

到

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

并将mouseDrag更改为

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;
}

Fiddle

JavaScript：鼠标按钮向下传播到图像，无法停止

1 个答案: