javascript - 如何在显示覆盖的更改事件后捕获点击事件？

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/>'); 
    });
});

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

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

输入框上的覆盖和更改事件需要执行当前业务规则。如何捕获点击事件？

Answer 1

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

工作样本: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/>'); 
    });
});