DOM API事件：事件代表團和stopPropagation

這是與jQuery 1.7代碼：DOM API事件：事件代表團和stopPropagation

<div class="test"> 
    <div class="bu"> 
    <a> 
     bu here 
    </a> 
    </div> 
</div> 
<script src="http://code.jquery.com/jquery-1.7.js"></script> 
<script> 
$(document).on('click', '.test', function() { alert(0); return false; }); 
$(document).on('click', '.bu', function() { alert(1); return false; }); 
$(document).on('click', '.bu', function() { alert(2); return false; }); 
</script>

上。測試點擊> .bu會提醒「1」，並提醒「2」，而不是提醒「0」

我的問題是：如何做到這一點WITHOUT jQuery（在本地DOM API）？看來，我不能用Native DOM API來實現它，而不實現我自己的庫...

謝謝！

來源

2011-11-17 4esn0k

標題使人相信您對stopPropagation問題。對於它的價值（並不多，因爲你不需要jQuery！），在提供的jQuery中，你可能想要防止默認值而不是返回false。 –

在Jquery中，他們在內部處理事件委派並停止傳播，以便只有它發生那樣。很顯然，在原生DOM api中，你必須實現自己的庫。 – AmGates

<div class="a"> 
    <div class="b"> 
     <div class="c" style="border: 1px solid silver; width: 80px; text-align: center;line-height: 80px;"> 
      click me! 
     </div> 
    </div> 
</div> 

<script> 

// Element.prototype.matchesSelector 
(function (x) { 
    var i; 
    if (!x.matchesSelector) { 
    for (i in x) { 
     if (/^\S+MatchesSelector$/.test(i)) { 
     x.matchesSelector = x[i]; 
     break; 
     } 
    } 
    } 
}(Element.prototype)); 

Document.prototype.on = 
Element.prototype.on = function (eventType, selector, handler) { 
    this.addEventListener(eventType, function listener(event) { 
    var t = event.target, 
     type = event.type, 
     x = []; 
    if (event.detail && event.detail.selector === selector && event.detail.handler === handler) { 
     return this.removeEventListener(type, listener, true); 
    } 
    while (t) { 
     if (t.matchesSelector && t.matchesSelector(selector)) { 
     t.addEventListener(type, handler, false); 
     x.push(t); 
     } 
     t = t.parentNode; 
    } 
    setTimeout(function() { 
     var i = x.length - 1; 
     while (i >= 0) { 
     x[i].removeEventListener(type, handler, false); 
     i -= 1; 
     } 
    }, 0); 
    }, true); 
}; 

Document.prototype.off = 
Element.prototype.off = function (eventType, selector, handler) { 
    var event = document.createEvent('CustomEvent'); 
    event.initCustomEvent(eventType, false, false, {selector: selector, handler: handler}); 
    this.dispatchEvent(event); 
}; 

document.on('click', '.b', function() { 
    alert(2); 
}); 
document.on('click', '.a', function() { 
    alert(1); 
}); 
document.on('click', '.b', function (event) { 
    alert(3); 
    event.stopPropagation(); 
}); 

</script>

來源

2011-11-17 16:18:14 4esn0k

代碼從哪裏來？ –

想法來自：http://krijnhoetmer.nl/irc-logs/whatwg/20111117#l-420，由mysefl – 4esn0k

實施榮譽原型'文檔'和'元素'。 :) – asakura89

在這裏你去：

document.addEventListener('click', function (e) { 
    if (hasClass(e.target, 'bu')) {    
     // .bu clicked 
     // do your thing 
    } else if (hasClass(e.target, 'test')) { 
     // .test clicked 
     // do your other thing 
    } 
}, false);

其中hasClass是

function hasClass(elem, className) { 
    return elem.className.split(' ').indexOf(className) > -1; 
}

現場演示：http://jsfiddle.net/Nrxp5/30/

來源

2011-11-17 16:32:19

DOM API事件：事件代表團和stopPropagation

回答

相關問題