我想在纯Javascript中实现我自己的DnD - 首先用于学习目的 - 然后我可能会使用它 - 我偶然发现了这个泡泡/捕获概念。通过阅读这个问题的接受答案:What is event bubbling and capturing?以及其他文章,我以为我知道了。
但我没有 - 因为我无法解释为什么这两段代码不会产生相同的结果。
为什么我注册此活动的顺序很重要? 我认为他们应该按照相同的顺序 - 无论他们如何注册 - 按照捕获/冒泡的规则被解雇。事实并非如此。
案例1:jsBin
案例2:also jsBin
案例3 - 这是first answer of the above mentioned question
Html它是一样的:
<div id="div1">
div 1
<div id="div2">
div 2
<div id="div3">
div3
</div>
</div>
</div>
案例1 Js:
var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");
/* div1 */
div1.addEventListener("click", function (event) {
log("capture phase: you clicked on div 1");
}, true);
div1.addEventListener("click", function (event) {
log("bubble phase: you clicked on div 1");
}, false);
/* div2 */
div2.addEventListener("click", function (event) {
log("capture phase: you clicked on div 2");
}, true);
div2.addEventListener("click", function (event) {
log("bubble phase: you clicked on div 2");
}, false);
/* div3 */
div3.addEventListener("click", function (event) {
log("capture phase: you clicked on div 3");
}, true);
div3.addEventListener("click", function (event) {
log("bubble phase: you clicked on div 3");
}, false);
var $log = $("#log");
function log(msg) {
$log.append('<p>' + msg + '</p>');
}
案例2 - javascript:
var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");
/* capture events */
div1.addEventListener("click", function (event) {
log("capture phase: you clicked on div 1");
}, true);
div2.addEventListener("click", function (event) {
log("capture phase: you clicked on div 2");
}, true);
div3.addEventListener("click", function (event) {
log("capture phase: you clicked on div 3");
}, true);
/* bubbling events */
div1.addEventListener("click", function (event) {
log("bubble phase: you clicked on div 1");
}, false);
div2.addEventListener("click", function (event) {
log("bubble phase: you clicked on div 2");
}, false);
div3.addEventListener("click", function (event) {
log("bubble phase: you clicked on div 3");
}, false);
我思考的谬误在哪里?我错过了什么?谢谢:))
答案 0 :(得分:1)
问题在于声明你的变量。
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 1s ease;
}
.collapse.in {
height: 200px;
}
$(document).ready(function() {
$("#read-more-1").click(function(){
console.log("click works");
if($("#read-block-1").hasClass("in")) {
$("#read-block-1")
.addClass('collapsing')
.removeClass('in')
.removeClass('collapsing')
}else{
$("#read-block-1")
.addClass('collapsing')
.addClass("in")
.removeClass('collapsing')
}
})
})
您没有收到任何错误,因为仅使用id的名称通过其id选择元素是完全合法的。你不应该这样做。它可以很快成为一场噩梦。
var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3"); // <----
&#13;
test.addEventListener('click', function() {
console.log(this);
})
&#13;
答案 1 :(得分:0)
问题出在这里
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");
一定是
var div2 = document.querySelector("#div2");
var div3 = document.querySelector("#div3");