Question

作为一个javascript学习练习，我做了一个小应用程序（应该）让我'以图形方式'创建一个网页（Dreamweaver样式）。我已经添加了一个基本的自定义菜单和一个消息弹出窗口作为单独的脚本。左键单击绑定到document.body即可打开菜单，因此页面上的任何位置都包括弹出窗口（当然，如果存在）。有没有办法避免这种行为？

修改

以下是处理弹出窗口中拖动操作的函数的（粗略）代码：

window.addEventListener('click', show_mnu, false); // Menu onclick event (simply shows the menu onscreen)

mb_hdr.addEventListener('mousedown', drag, false); // Popup event handlers
document.addEventListener('mouseup', drag, false); //


var dragOffsetX, dragOffsetY;
function drag(evt)
{
    var evt = evt||window.event;
    var target = document.getElementById('popup');

    switch(evt.type)
    {
        case 'mousedown':
        {
            dragOffsetX = evt.clientX - target.offsetLeft;
            dragOffsetY = evt.clientY - target.offsetTop;
            document.addEventListener('mousemove', drag, false);
            break;
        }
        case 'mouseup':
        {
            dragOffsetX = dragOffsetY = null;
            document.removeEventListener('mousemove', drag, false);
            break;
        }
        case 'mousemove' :
        {
            if(dragOffsetX && dragOffsetY)
            {
                target.style.left = (evt.clientX - dragOffsetX) + 'px';
                target.style.top  = (evt.clientY - dragOffsetY) + 'px';
            }
            break;
        }
    }
    evt.stopPropagation(); //????
}

Answer 1

我想你已经在关于你的问题的评论中的链接中读到了关于事件冒泡和传播的内容：如果你点击任何元素，事件会向下传播，直到它到达窗口，其show_mnu处理程序。

要取消传播，您需要添加此处理程序

function stop(e) {
    e.stopPropagation();
    (e||event).cancelBubble = true; // if you need to support IE<9
}

到每个mousedown，mouseup和click处理程序，你不希望传播它。

请参阅the fiddle：点击灰色框会停止传播到窗口。

注意如果您想要实施拖放功能，您可能会发现this tutorial很有用，因为它使用了supported well on desktop systems的HTML5功能。

js如何避免鼠标事件在不同元素上的冲突

1 个答案: