如何在更改事件处理程序中追加后获取jQuery click事件_Jquery_Events

如何在更改事件处理程序中追加后获取jQuery click事件

jquery events

如何在更改事件处理程序中追加后获取jQuery click事件,jquery,events,Jquery,Events,我有以下文件： <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>Test</title> <script src="https://code.jquery.com/jqu

我有以下文件：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
</head>
<body>
    <div id="alert"></div>
    <input type="text" id="input"></br>
    <span id="span">Span</span>

<script>
    $(function() {
        $('#input').on('change', function() {
            console.log('change');
            $('#alert').append('<div>An alert</div>');
        });
        $('#span').on('click', function() {
            console.log('click');
        });
    });
</script>
</body>
</html>

如果更改事件处理程序中没有“append”，则在编辑输入时，单击我看到的范围：

跨距上的鼠标向下移动

输入改变

span上的鼠标

点击span

但是，通过更改事件处理程序中的append，我看到：

跨距上的鼠标向下移动

输入改变

输入鼠标

在后一种情况下，mousedown和mouseup事件具有相同的坐标（如果我在单击时小心不要移动鼠标）：它们都是span元素边界内和输入元素外部的坐标。尽管如此，在Firefox和Chrome中，mouseup与输入元素相关联，而不是span元素

因此，我的问题是：当mouseup事件的坐标在span元素的范围内而不是在输入元素的范围内时，为什么mouseup事件与输入元素而不是span元素相关联

$（函数（）{ $（'#input'）。on（'change'，function（）{ console.log（'change'）； $（'#警报'）。追加（'警报'，函数（）{ $（'#span'）。在（'click'，function（）上{ console.log（'click'）； }); }); }); $（'#span'）。在（'click'，function（）上{ console.log（'click'）； }); });

我保存了你的代码并在浏览器中运行，它可以正常工作。你为什么不这么认为？是否正在检查控制台输出？

在更改事件处理程序中添加$（'#span'）。单击（）

$（函数（）{
$（'#input'）。on（'change'，function（）{
console.log（'change'）；
$（'警报'）。追加（'警报'）；
$（'#span'）。单击（）；
});
$（'#span'）。在（'click'，function（）上{
console.log（'click'）；
});
});

我发现了我的问题所在：

当我添加到div时，文档布局会发生变化。我将光标放在跨度上，然后按下鼠标左键。这会导致输入失去焦点，从而触发更改事件。更改事件处理程序将一个div附加到#alert div。这将把它下面的所有内容都推到屏幕上。然后我松开鼠标按钮，没有移动它。但是鼠标不再位于范围之上-由于布局的改变，它现在位于输入之上，因此mouseup事件将输入作为其目标，而不是范围

即使鼠标没有移动，屏幕布局也发生了变化，因此鼠标离开了范围并输入了输入。span会看到一个mousedown，没有mouseup，因此没有单击。输入看到一个mouseup，没有mousedown，因此也没有单击

我的错误是认为，因为我没有移动鼠标，鼠标应该仍然在跨度上

如果我将alert div放在span之后，那么编辑输入并单击span将按预期工作，但这不是我想要的屏幕布局

我想如果我将alert div保留在顶部，我需要在change事件处理程序中做的是将消息添加到alert div，这将向下移动范围，然后向下移动鼠标，使其仍然位于范围之上。然后，当用户释放鼠标按钮时，它仍将在跨度上，跨度可能（我希望）会收到一个单击事件。

可以有许多解决方法来处理此问题。这完全取决于用户界面的表现。根据设计，您还可以考虑其他解决方法。到目前为止，我可以想到三件事来处理这个问题：

给你的预警div一个高度，并使其可以垂直滚动。这样做将防止span的位置变化，并触发这两个事件。e、 g

或者您可以稍微更改javascript以满足您的需要。下面是代码片段（注释已修改），并根据您的需要进行了更改

$(function() {
    var isMouseDownOnSpan = 0;  // flag variable added to track whether user clicked on the span.
    $('#input').on('change', function() {
        console.log('change');
        $('#alert').append('<div>An alert</div>');
        // If user tries to click on the span then trigger the click event manually.
        if(isMouseDownOnSpan){
            $('#span').trigger('click');                
        }
    });

    // Bind mousedown event and set the flag value true. This ensures that the user clicked on the span.
    $('#span').on('mousedown', function(e) {
        isMouseDownOnSpan = 1;
    });

    $('#span').on('click', function() {
        isMouseDownOnSpan = 0; // Reset flag value once the click event is fired.
        console.log('click');
    });
  });

$（函数（）{
var isMouseDownOnSpan=0；//添加了标志变量以跟踪用户是否单击了范围。
$（'#input'）。on（'change'，function（）{
console.log（'change'）；
$（'警报'）。追加（'警报'）；
//如果用户试图单击范围，则手动触发单击事件。
如果（isMouseDownOnSpan）{
$（'#span'）。触发器（'click'）；
}
});
//绑定mousedown事件并将标志值设置为true。这可确保用户单击范围。
$（'#span'）。on（'mousedown'，函数（e）{
isMouseDownOnSpan=1；
});
$（'#span'）。在（'click'，function（）上{
isMouseDownOnSpan=0；//触发单击事件后重置标志值。
console.log（'click'）；
});
});

否则，上述任何一项都不适合您，那么您可以设计您的跨度，并为其指定一定的宽度和高度，以便即使在附加了警报div之后，用户的鼠标仍在跨度边界内。我知道这不可能是一个永久的解决方案，但它仍然可以最大限度地减少现实生活场景中错误的变化

在这里工作很好，但它不是100%清楚你期望它做什么。代码完全按照编写时应该执行的操作。换句话说，你的解释不是很清楚。对不起，我不知道用什么术语来表达清楚。如果我编辑输入框的内容，然后单击范围而不离开输入框，我希望同时出现更改和单击事件，但我只看到更改事件。我正在使用Firefox 34.0.5。这将在

#span

上添加计算点击处理程序，以防有人无意中发现。这不是好代码。原始on事件将捕获click事件。在同一时间跨度上添加重复事件不会解决他的问题，也不是一个好方法。我尝试了这个方法，但没有解决我的问题。我没有看到在跨度上的后续单击事件上执行额外的单击事件处理程序，因此我猜永远不会调用要追加的第二个参数，尽管它已添加到 <div id="alert" style="height: 100px; overflow-y: scroll;"></div>

$(function() {
    var isMouseDownOnSpan = 0;  // flag variable added to track whether user clicked on the span.
    $('#input').on('change', function() {
        console.log('change');
        $('#alert').append('<div>An alert</div>');
        // If user tries to click on the span then trigger the click event manually.
        if(isMouseDownOnSpan){
            $('#span').trigger('click');                
        }
    });

    // Bind mousedown event and set the flag value true. This ensures that the user clicked on the span.
    $('#span').on('mousedown', function(e) {
        isMouseDownOnSpan = 1;
    });

    $('#span').on('click', function() {
        isMouseDownOnSpan = 0; // Reset flag value once the click event is fired.
        console.log('click');
    });
  });