javascript stopPropagation无法在输入字段上工作

Question

有一个简单的div数组,其中包含用户可以选择的值,以及一个可以放入自己编号的"其他"字段.我有一个清除div(右下),它将清除选择和输入字段; 但是,我也希望在包含div上有一个click事件.

我已经搜索过,似乎没有什么可以做的,接近的是使用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().该事件应作为函数(处理程序)的参数传递.当然,只要您不想与它进行交互,就可以跳过它.