Question

我有一个html表，当用户点击表格行时，会选中行的复选框，并出现其他一些功能。当用户点击选择或输入时，我想停止传播，因此复选框不会更改。我在这个JSFiddle中演示了我正在寻找的功能：

在我的开发网站上，当用户单击选择时，复选框会按预期更改，但如果用户单击输入，则复选框不会更改。我有这个代码来阻止复选框的更改：

$("select").click(function (e) {
    e.stopPropagation();
});

$("input").click(function (e) {
    e.stopPropagation();
});

有没有人知道为什么选择点击有效，但输入点击不是？

更新*

JSFiddle：http://jsfiddle.net/ehf7pc3f/8/

我添加了一个新的JSFiddle，它在单击输入时触发警报，在单击行时发出警报。在小提琴中，如果我单击输入，则仅触发输入警报。如果我在我的开发站点上执行相同的测试，则只会触发行警报。

这是我开发网站上的实际代码：

<table class="full-width row-table" style="table-layout:fixed;">
    <tr style="background:none;" class="no-hover row">
        <td class="no-padding" style="width:16px;"><input class="check-box" style="margin:2px 0px;" type="checkbox" /></td>
        <td class="no-padding" style="width:6px;"><span class="arrow2" style="margin:6px 0px 0px 0px;"></span></td>
        <td style="width:94px;">
            <span class="contact-label">Owner <br /> </span>
            <select class="contact-drop-down hidden">
                <option value="Owner">Owner</option>
                <option value="Applicant">Applicant</option>
                <option value="Contractor">Contractor</option>
            </select>
        </td>
        <td style="width:95px;">
            <p class="title-label">Owner</p>
        </td>
        <td style="width:119px;">
            <p class="name-label">Michael Douglas</p>
        </td>
    </tr>
</table>

Answer 1

使用event.preventDefault()。

event.stopPropagation()阻止事件冒泡DOM中的父元素（如果您在捕获阶段正在侦听，则停止）。虽然event.preventDefault()会停止浏览器的默认行为。

进一步阅读：

https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

输入点击停止传播

1 个答案: