javascript - 为什么我的自定义 jQuery `change` 事件被触发两次？

Question

我是trying to make jQuery 兼容的复合 HTML 输入。

在this example当 select 改变时，alert 被调用两次。为什么？

给定一个简单的容器节点:

<span id="x"></span>

这是一个完整的演示:

function el (type) {
    return document .createElement (type);
}

function opt (sel, value) {
    let node = el ('option');
    node .value = value;
    node .appendChild (document .createTextNode (value));
    sel .appendChild (node);
}

let x = document .getElementById ('x');
let a = el ('select');
let b = el ('select');

x .appendChild (a);
x .appendChild (b);

opt (a, 'a_1');
opt (a, 'a_2');
opt (b, 'b_1');
opt (b, 'b_2');

$(a) .change (function () {$(x) .trigger ('change');});
$(b) .change (function () {$(x) .trigger ('change');});

$(x) .change (function () {alert ('changed');});

Answer 1

这是因为当您在下拉列表中更改值时，它会更改父级 drom 结构。这意味着你正在改变 A 和 B 的值 A 和 B 的专利是 X 所以它会自动改变所以你必须停止事件传播

你必须删除下面的代码

$(a) .change (function () {$(x) .trigger ('change');});
$(b) .change (function () {$(x) .trigger ('change');});

或者你必须使用 preventDefault();

$(a) .change (function (e) {e.preventDefault(); $(x) .trigger ('change'); return false; });
$(b) .change (function (e) {e.preventDefault(); $(x) .trigger ('change'); return false; });