javascript 我可以有一个事件说:[副本]

b1uwtaje  于 2023-01-16  发布在  Java
关注(0)|答案(2)|浏览(129)
    • 此问题在此处已有答案**:

11年前关闭了。

    • 可能重复:**

jQuery: Detecting click-and-hold
我正在寻找一些方法有一个img,当我按住图像可能1或2秒,jQuery更改CSS为"显示","块"...我已经找了又找,找不到我需要的。请给最好的答案可能。我正在做一个手指扫描应用程序...:)这里是我现在的代码:
超文本:

<body>
  <img id="testlaser" src="images/Laser.gif">
  <div class="fingerprint">
  </div>
  <img class="access_denied" src="images/AccessDenied.jpg">
</body>

CSS:

<style>
       body{-webkit-user-select: none;overflow:hidden;scrolling:no;}
  #testlaser{height:100%;width:100%;position:absolute;display:none;}
      .fingerprint{display:block;position:absolute;background-image:url(images/fingerprint.gif);background-repeat:no-repeat;background-position:center center;text-align:center;width:100%;height:90%}
      .access_denied{display:none;background-position:center center;width:100%;height:100%;}
        .access_granted{display:none;background-position:center center;width:100%;height:100%;}
</style>

Java脚本:

<script>
$(".fingerprint").click('click mousedown', function(){
  $("#testlaser").css("display","block")
    $(".fingerprint").css("display","block")
      setTimeout(function(){
  $("#testlaser").css("display","none")
    $(".fingerprint").css("display","none")
    $(".access_denied").css("display","block")
},10000);
});
$(".access_denied").click(function(){
     $("#testlaser").css("display","none")
     $(".fingerprint").css("display","block")
     $(".access_denied").css("display","none")
});
</script>
ulydmbyx

ulydmbyx1#

添加一个“mousedown”处理程序到你的图像,它设置一个两秒后的触发函数和一个“mouseup”函数,它清除超时函数。例如:

(function() {
  var foo=$('#foo'), tf=null;
  foo.mousedown(function() {
    tf = setTimeout(function() {
      alert('Two seconds!');
    }, 2000);
  });
  foo.mouseup(function() {
    clearTimeout(tf);
  });
})();

下面是一个要 Boot 的working jsFiddle demo

cnjp1d6j

cnjp1d6j2#

如果你认为你会经常这样做,你可以做一个插件(好吧..所以我对此很感兴趣)。
以下是调用代码:

$('.fingerprint').delayedReaction(function() { 
    $(".fingerprint").hide();
    $(".access_denied").show();
});

$(".access_denied").click(function() {
    $(".fingerprint").show();
    $(".access_denied").hide();
});

下面是插件:

(function($){
    $.fn.delayedReaction = function(successFunction, options) {
        var settings = $.extend({}, $.fn.delayedReaction.defaults, options);

        this.each(function() {
            var timeout,
                myFunction = successFunction,
                $this = $(this);

            var run_func = function() {
                myFunction.apply($this)
            };

            $this.bind(settings.startEvent, function() {
                timeout = setTimeout(run_func, settings.delayFor);
            });

            $this.bind(settings.stopEvent, function() {
                clearTimeout(timeout);
                timeout = null;
            });
        });

        return this;
    }

    $.fn.delayedReaction.defaults = {
        startEvent: 'mousedown',
        stopEvent: 'mouseup mouseleave',
        delayFor: 3000
    }

})(jQuery);

查看实际应用:http://jsfiddle.net/natedavisolds/Nb7zQ/1/

相关问题