Question

我在jsfiddle：http://jsfiddle.net/yn183v6e/5/

中创建了我的代码的隔离版本

$(document).ready(function() {
    $('body').on('click', 'span', function() {
       $('#content').append('Click on span<br/>'); 
    });
    $('#input').on('change', 'input', function(e) {
        $('#content').append('Change<br/>'); 
        $('p').show();
    });
    $('body').on('click', 'p', function(e) {
        $(this).hide();
    });
    $('body').on('click', function(e) {
       $('#content').append('Click on body<br/>'); 
    });
});

输入框上有一个显示叠加层的更改事件。当您在输入框中键入内容，然后单击“开始”按钮，将触发更改事件并且单击事件将丢失。如果覆盖不存在，则捕获点击事件就好了。使用叠加层时，点击事件将丢失。

我将点击事件附加到正文，叠加层和按钮，但未捕获点击事件。

输入框上的叠加和更改事件是强制执行当前业务规则所必需的。如何捕获点击事件？

Answer 1

使用mousedown事件在change上的input事件之前触发该事件

工作样本：http://jsfiddle.net/yn183v6e/7/

$(document).ready(function() {
    $('body').on('mousedown', 'span', function() { // Changed click event for mousedown event
       $('#content').append('Click on span<br/>'); 
    });
    $('#input').on('change', 'input', function(e) {
        $('#content').append('Change<br/>'); 
        $('p').show();
        debugger;
    });
    $('body').on('click', 'p', function(e) {
        $(this).hide();
    });
    $('body').on('click', function(e) {
       $('#content').append('Click on body<br/>'); 
    });
});

Answer 2

问题不在于click事件，而在于您<p>事件所带来的全能change。

由于首先触发了change，因此输入模糊，p位于所有内容之上，点击后永远无法访问span ... < / p>

点击身体因为<p>是身体的一部分......

删除$('p').show();并查看：http://jsfiddle.net/yn183v6e/6/

如何在显示叠加层的更改事件后捕获点击事件？

2 个答案: