写 bug 写不够
· One min read
非著名前端
Vue.js @2.1.6
input 框将无法被选中，似乎 click 事件传播影响到了 input check
可以使用 .self 修饰符修饰 click 事件
new Vue({ el: "#app", data: function () { return { num: 1, checked: false } }, template: ` <div @click="add"> click {{ num }} <input type="checkbox" v-model="checked"> </div>`, methods: { add: function () { this.num++ }, },})stopImmediatePropagation阻止监听同一事件的其他事件监听器被调用。
<!DOCTYPE html><html> <head> <style> p { height: 30px; width: 150px; background-color: #ccf; } div { height: 30px; width: 150px; background-color: #cfc; } </style> </head> <body> <div> <p>paragraph</p> </div> <script> const p = document.querySelector("p") p.addEventListener( "click", (event) => { alert("我是p元素上被绑定的第一个监听函数") }, false )
p.addEventListener( "click", (event) => { alert("我是p元素上被绑定的第二个监听函数") // 阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行. event.stopImmediatePropagation() }, false )
p.addEventListener( "click", (event) => { alert("我是p元素上被绑定的第三个监听函数") // 该监听函数排在上个函数后面，该函数不会被执行 }, false )
document.querySelector("div").addEventListener( "click", (event) => { alert("我是div元素,我是p元素的上层元素") // p元素的click事件没有向上冒泡，该函数不会被执行 }, false ) </script> </body></html>