jquery 一个元素上的多个事件

Question

例如，我如何在一个元素上应用不同的事件

单击一下我想显示exampleModal

和

双击事件

我想显示LoadedEvents

两个事件都必须应用于一个恰好是的元素

<span class="glyphicon glyphicon-link connected hoverd"></span>





<!--Connected Events-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    ## One click
</div>

我的jquery代码是

<!--Loaded Events-->
<div class="modal fade bs-example-modal-sm" id="LoadedEvents">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
     Connected events..!
    </div>
  </div>

$('.connected').on('dblclick',function() {
        $('#exampleModal').modal({
            show: true
        });
    });

    $('.hoverd').on('click', function(event) {
        event.preventDefault();
        $('#LoadedEvents').modal({
            show: true
        });
    });

Answer 1

那么，您可以使用发送到该函数的事件，然后停止它并自己计算点击次数。所以它会是这样的:

var clickCount = 0;
var timeoutTarget;
$('.someElement').click(function(e){
    e.preventDefault();
    clickCount++;
    if(clickCount > 1)
        clearTimeout(timeoutTarget);
    timeoutTarget = setTimeout(function(){
        if(clickCount == 1) {
            // single click
        }
        if(clickCount > 1) {
            // double click
        }
        clickCount = 0;
    }, 300); // The amount of time you think you can give between clicks
});

如果你想测试一下，这里有一个 fiddle :https://jsfiddle.net/7adad8x0/