雙擊Javascript在IE9和IE11中不起作用

Question

在我的JavaScript代碼中，單擊打開新標簽頁中的鏈接，然后雙擊打開燈箱。 在IE9和IE11之外的所有瀏覽器中都可以正常運行。 在我的第一個代碼中，單擊和雙擊均有效，但是對於單擊，IE會顯示消息“允許彈出窗口？”。 我希望IE像其他瀏覽器一樣，在沒有消息的新選項卡中打開鏈接。 在我的第二個代碼中，單擊可按我的方式工作，但是IE中雙擊的第二次單擊將被忽略，最終以單擊的方式工作。 是否可以做一些事情來消除我可能會丟失的問題-在第一個代碼中還是在第二個代碼中？

第一個代碼：

                       $('div[id^="jzl_"].short').click(function(e) {
                              var $this = $(this);
                              var currentID = e.target.id;

                              if ($this.hasClass('clicked')) {
                                     $this.removeClass('clicked');
                                     $.colorbox({
                                            href : "getInfo1.php?id=" + currentID,
                                            overlayClose : false,
                                            top : "16%"
                                     });
                                     //$.colorbox({ overlayClose: false });
                                     //alert("Double click");
                                     //here is your code for double click
                              } else {
                                     $this.addClass('clicked');
                                     setTimeout(function() {
                                            if ($this.hasClass('clicked')) {
                                                   $this.removeClass('clicked');
                                                   //                                 alert("Just one click!");
                                                   var jobSite = window.open('', '_blank');
                                                   sleep(1000);
                                                   var redirct = getPage(currentID);
                                                   sleep(1000);
                                                   jobSite.location = redirct;
                                                   //var redirct = getPage(currentID);
                                                   //window.open(redirct, '_newtab' + Math.floor(Math.random() * 999999));
                                            }
                                     }, 500);
                              }
                       });

第二碼：

                       $('div[id^="jzl_"].short').click(function(e) {
                              var $this = $(this);
                              var currentID = e.target.id;
                              var jobSite = window.open('', '_blank');
                              if ($this.hasClass('clicked')) {
                                     $this.removeClass('clicked');
                                     $.colorbox({
                                            href : "getInfo1.php?id=" + currentID,
                                            overlayClose : false,
                                            top : "16%"
                                     });
                                     //$.colorbox({ overlayClose: false });
                                     //alert("Double click");
                                     //here is your code for double click
                              } else {
                                     $this.addClass('clicked');
                                     setTimeout(function() {
                                            if ($this.hasClass('clicked')) {
                                                   $this.removeClass('clicked');
                                                   //                                 alert("Just one click!");
                                                   var redirct = getPage(currentID);
                                                   jobSite.location = redirct;
                                                   //var redirct = getPage(currentID);
                                                   //window.open(redirct, '_newtab' + Math.floor(Math.random() * 999999));
                                            }
                                     }, 500);
                              }
                       });

Answer 1

您應該同時使用.click（）和.dblclick（），而不是測試元素是否具有clicked類。 因此，這是新代碼：

$('div[id^="jzl_"].short').dblclick(function(e) {

var $this = $(this);
var currentID = e.target.id;

$.colorbox({
href : "getInfo1.php?id=" + currentID,
overlayClose : false,
top : "16%"
});

//$.colorbox({ overlayClose: false });
//alert("Double click");
//here is your code for double click

});



$('div[id^="jzl_"].short').click(function(e) {

 var $this = $(this);
 var currentID = e.target.id;

 var jobSite = window.open('', '_blank');
 var redirct = getPage(currentID);
jobSite.location = redirct;

//var redirct = getPage(currentID);
//window.open(redirct, '_newtab' + Math.floor(Math.random() * 999999));

});

Answer 2

該解決方案應該起作用：

var t = []; //timeout array
$('div[id^="jzl_"].short')
    .on('click', function(e) {
        var $this = $(this),
            currentID = e.target.id;

        // put each click in timeout array
        t[t.length] = setTimeout(function() {
            t = []; //reset timeout array
            alert('clicked: ' + currentID);

            //your code here

        }, 500);
    })
    .on('dblclick', function (e) {

        //cancel 2 timeouts and reset timeout array
        clearTimeout(t[0]);
        clearTimeout(t[1]);
        t = [];

        var $this = $(this),
            currentID = e.target.id;

        window.open('http://google.com', '_blank');
    });

演示位於http://jsfiddle.net/tvL07phr/2/