有<div>两个班级。对于每个班级，都有一个单击时触发的事件，每个班级都有一个单独的事件。有没有一种方法可以确保针对该类的事件class_one始终首先被触发并且始终console.log("First")首先被触发。
$('body').on('click', '.class_one', function() {
console.log("First")
})
$('body').on('click', '.class_two', function() {
console.log("Second")
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class_one class_two">Click me</div>事件不是在类上触发的，而是在元素上触发的。如果在同一个元素上设置了“ class_one”和“ class_two”类，则事件将以其绑定的相同顺序被调用。但是，事件冒泡，这意味着“ click”事件首先在元素被单击时触发，然后在其父元素上触发，依此类推。
这意味着，如果您能够更改DOM，则可以强制首先触发类“ class_one”上的事件。这可以通过从元素中删除“ class_two”类并将其包装在“ class_one”元素周围来完成。
可以在jQueryon文档中找到此行为的描述：
当
selector被提供时，事件处理程序被称为委托。当事件直接发生在绑定元素上时，不调用处理程序，而仅对与选择器匹配的后代（内部元素）进行调用。jQuery使事件从事件目标一直冒泡到附加了处理程序的元素（即，最内层元素到最外层元素），并沿着该路径运行与选择器匹配的任何元素的处理程序。
$('body').on('click', '.class_one', function() {
console.log("First")
})
$('body').on('click', '.class_two', function() {
console.log("Second")
})
$('body').on('click', '.class_one', function() {
console.log("Third")
})
$('body').on('click', '.class_two', function() {
console.log("Fourth")
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class_two">
<div class="class_one">Click me</div>
</div>就像上面已经说过的：如果在同一个元素上设置了“ class_one”和“ class_two”类，则事件将以它们绑定的相同顺序被调用。
也可以在on文档中找到：
绑定到元素的事件处理程序的调用顺序与其绑定的顺序相同。
此属性可用于注册两个充当“寄存器”的事件，并触发所有添加到此“寄存器”的事件（示例中为简单数组）。
该解决方案不需要您更改DOM，而是需要您更改JavaScript中的事件注册。
const class_one_click_fns = [],
class_two_click_fns = [];
$('body').on('click', '.class_one', function(...args) {
class_one_click_fns.forEach(fn => fn.call(this, ...args))
})
$('body').on('click', '.class_two', function(...args) {
class_two_click_fns.forEach(fn => fn.call(this, ...args))
})
class_one_click_fns.push(function () {
console.log("First")
})
class_two_click_fns.push(function () {
console.log("Second")
})
class_one_click_fns.push(function () {
console.log("Third")
})
class_two_click_fns.push(function () {
console.log("Fourth")
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class_one class_two">Click me</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句