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/的演示