刪除兒童事件處理程序，但不是與jQuery自我

我有一個div有一個孩子跨度，而又有一個孩子跨度。我用鉤mouseDown事件這樣父DIV：刪除兒童事件處理程序，但不是與jQuery自我

$("." + cellClass).mousedown(mouseDownEvent);

但是，這也勾住孩子的事件。我怎樣才能解除綁定孩子或綁定div？

我試過，但它似乎不工作：

$("." + cellClass).children().unbind();

這不起作用：

function mouseDownEvent(event){ 
    event.stopPropagation(); 
    isMouseDown = !isMouseDown; 
    var cell = event.target; 
    selectedCells = []; // reset 
    selectedCells = addCellToSelection(cell, selectedCells) 
}

UPDATE

通過Serlite提出的解決方案工程停止跨越的事件。現在唯一的問題是，如果動作發生在跨度上（即使鼠標在DIV內），也沒有事件觸發。考慮到跨度事件已關閉，但是有沒有辦法確保DIV的事件被激發，而不管跨SPAN中的im是否被激發？

來源

2015-08-14 rex

如果你想讓你的細胞的孩子不觸發他們父母的回調函數（即如果mousedown發生在孩子身上，不要執行mouseDownEvent()），你需要停止傳播事件開始從孩子的水平。

這可以通過將另一個回調函數綁定到父級的子級，然後從那裏調用stopPropagation()來完成。使用當前的命名，你的代碼的這部分可以再變成：

$("." + cellClass).mousedown(mouseDownEvent); 
$("." + cellClass).children().mousedown(mouseDownEventChild);

哪裏mouseDownEventChild()很簡單：

function mouseDownEventChild(e){ 
    e.stopPropagation(); 
}

這裏有一個JSFiddle證明。希望這可以幫助！如果您有任何問題，請告訴我。

編輯：

爲響應更新的問題，我首先想到的是檢查孩子的點擊事件是否父的範圍內發射。（有可能是一個更好的解決方案，但是這是最簡單的，我可以工作了）。這將改變mouseDownEventChild()到：

function mouseDownEventChild(e){ 
    e.stopPropagation(); 
    var $parentEl = $(this).parent(); 

    // Traveling up DOM until we find an appropriate parent 
    while (!$parentEl.hasClass(cellClass)){ 
     $parentEl = $parentEl.parent(); 
    } 

    // Checking mouse event is within bounding box 
    var parentBounds = $parentEl[0].getBoundingClientRect();  
    if (e.clientX >= parentBounds.left && e.clientX < (parentBounds.left + parentBounds.width) && e.clientY >= parentBounds.top && e.clientY < (parentBounds.top + parentBounds.height)){ 
     mouseDownEvent(e); 
    } 
}

下面是一個updated JSFiddle向你展示修改後的行爲。讓我知道這是否符合您的要求。

來源

2015-08-14 21:22:35 Serlite

感謝這工作 – rex

太棒了，很高興我能幫忙。 – Serlite

但現在唯一的問題是，如果我點擊單元格中的跨度是事件不會觸發，即使通過鼠標在div內。是否有可能解決這個問題？ – rex

刪除兒童事件處理程序，但不是與jQuery自我

回答

相關問題