js如何避免不同元素上的鼠標事件衝突

作爲一個JavaScript學習練習，我做了一個小應用程序，讓我創建一個「圖形化」（Dreamweaver風格）的網頁。我已經添加了一個基本的自定義菜單和一個消息彈出框。這個菜單在鼠標左鍵點擊打開時綁定到document.body，所以在頁面的任何地方包括彈出窗口（當然，如果有的話）。有沒有辦法避免這種行爲？js如何避免不同元素上的鼠標事件衝突

編輯

下面是功能處理上彈出拖動操作（粗糙）代碼：

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(); //???? 
}

來源

2014-03-04 user1925015

在事件處理程序中，檢查目標元素並根據它是否是菜單執行。 – Bic

可能是一個更好的方法，但你可以使用onmouseover清除綁定彈出並重置它onmouseout – jing3142

如果彈出窗口有它自己的點擊處理程序，它需要防止事件冒泡。如果不是，您的文檔點擊處理程序必須檢查目標是否在彈出窗口中，並返回而不顯示菜單。沒有看到你的代碼很難更詳細。 – Barmar

我想你已經瞭解在評論中的鏈接事件冒泡和傳播你的問題：如果你點擊任何元素，事件傳播下來，直到它到達窗口，其show_mnu處理程序。

要取消的傳播，需要

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

添加此處理程序的每一個鼠標按下，鼠標鬆開，然後單擊處理程序，你不希望傳播下來。

請參閱the fiddle：單擊灰色框可停止傳播到窗口。

注意，如果你想實現拖動&下降，你會發現this tutorial有用，因爲它使用的是HTML5的一些特點supported well on desktop systems。

來源

2014-03-05 00:22:52

js如何避免不同元素上的鼠標事件衝突

回答

相關問題