鼠标按下后单击事件，鼠标向上事件不会发生

Click event following mousedown and mouseup events won't occur

本文关键字：事件 鼠标 单击      更新时间：2023-09-26

我想要以下行为。

  1. "Foo"显示在浏览器上。
  2. 如果您在"Foo"上按下鼠标按钮，将显示"Foo"的"栏"。
  3. 如果您松开按钮，"酒吧"将再次显示"Foo"。
  4. 最后，"您好"显示在警报框中。

我编写了以下代码，但最后一步从未发生。似乎 .hide(( 方法正在阻止点击事件的发生。 有什么想法要解决吗？

<body>
<div id="parent">
    <div id="foo">Foo</div>
    <div id="bar">Bar</div>
</div>
<script>
$(function(){
    $("#foo").show();
    $("#bar").hide();
    $("#parent").mousedown(function(){
        $("#foo").hide();
        $("#bar").show();
    });
    $("#parent").mouseup(function(){
        $("#foo").show();
        $("#bar").hide();
    });
    $("#parent").click(function(){
        alert("Hello");
    });
})
</script>
</body>
当

mousedown和mouseup事件同时发生时，会发生click事件。您可以在mouseup末尾附加用于click的代码 

$("#parent").mouseup(function(){
    $("#foo").show();
    $("#bar").hide();
    alert("Hello");
});
  1. "foo"显示在浏览器上。
  2. 如果您按下"Foo"上的鼠标按钮，将显示"bar"为"foo"。
  3. 如果您松开按钮，"bar"将再次显示"foo"。
  4. 最后，警报框中显示"您好"。

你所说的"终于"有些含糊不清。但是，一种解决方案是在从 #foo 触发每个mousedown事件后向 window 对象添加一个事件侦听器。然后，您可以在侦听器回调函数结束时删除侦听器，从而产生"仅触发一次"设计。

on_mouseup_fn = function(e) {
    //Third condition
    $('#foo').show();
    $('#bar').hide();
    //Fourth condition
    alert("Hello!");
    $(window).off('mouseup', on_mouseup_fn);
}
$(document).ready(function() {
    //First condition
    $('#bar').hide()
    $('#foo').on('mousedown', function(e) {
        //Second condition
        $(e.currentTarget).hide();
        $('#bar').show();
        //For third and fourth conditions
        $(window).on('mouseup', on_mouseup_fn);
    });
});

这是一个功能性的jsFiddle演示。如果我误解了您想要的元素行为，请告诉我。

http://jsfiddle.net/n9GcS/8/

相关文章：