javascript stopPropagation 不适用于输入字段

Question

有一个简单的 div 数组，其中包含用户将从中选择的值和一个“其他”字段，用户可以在其中输入自己的数字。我有一个清除 div(右下方)，它将清除选择和输入字段；但是，我也想在包含的 div 上有一个点击事件。

我已经搜索过，但似乎没有什么能解决问题，最接近的方法是使用 stopPropagation，因此单击 div 不会触发包含 div 的脚本。它适用于所有 div，但由于某种原因不适用于输入字段。每次我单击数字洗涤器或尝试在字段中键入它调用包含 div 的重置脚本。是否存在导致 stopPropagation 不起作用的输入字段？或者我错过了什么。我发现的其他任何东西似乎都无法解决它。

HTML

<div id="don_options">
    <div class="group">
        <div class="col"><span class="don">xxx</span></div>
        <div class="col"><span class="don">xxx</span></div>
        <div class="col"><span class="don">xxx</span></div>
    </div>

    <div class="group">
        <div class="col"><span class="don">xxx</span></div>
        <div class="col"><span class="don">xxx</span></div>
        <div class="col"><span class="don">xxx</span></div>
    </div>

    <div class="group">
        <div class="col"><span class="don">xxx</span></div>
        <div class="col"><span class="don">xxx</span></div>
        <div class="col"><span class="don">xxx</span></div>
    </div>

    <div class="group">
        <div class="col"><span class="don">Other</span><br class="mobile"><input id="other" name="other" type="number" min="3" step=".01" value="" size="25" maxlength="255" class="form-text2" placeholder="Other"></div>
        <div class="col">&nbsp;</div>
        <div class="col"><span class="don">Clear</span></div>
    </div>
</div>

Javascript

$('#don_options').on('click', function(e) {
    resetDon();
});

$('.don').on('click', function(e) {
    e.stopPropagation(); // stop bubbling to parent element
    //e.preventDefault();
    //e.cancelBubble = true;
    //e.stopImmediatePropagation();

    //lots of buttonesk goodness here
});

$('#other').on('keyup change click', function(e) {
    e.stopPropagation(); // stop bubbling to parent element
    //e.preventDefault();
    //e.cancelBubble = true;
    //e.stopImmediatePropagation();

    //more goodness here for the input field
});

function resetDon() {
    //clear "buttons" here
}

为视觉添加快速截图。黑框是包含的 div

Answer 1

在这段代码中:

$('.don').on('click', function() {
   e.stopPropagation(); // stop bubbling to parent element
   ...
});

e 未定义。应该是函数参数:

$('.don').on('click', function(e) {
   e.stopPropagation(); // stop bubbling to parent element
   ...
});

请参阅 $.on() 的完整文档.该事件应作为函数(处理程序)的参数传递。当然，您可以在不想与其交互时跳过它。