JavaScript double-click functionality is not operational on IE9 and IE11 browsers

My JavaScript code has an issue where single-click opens a link in a new tab and double-click opens a lightbox. This works perfectly in all browsers except for IE9 and IE11. In my initial code, both single-click and double-click function correctly. However, when single-clicking in IE, a popup message appears asking "allow pop-up?" I want IE to open the link in a new tab without this message just like the other browsers. In my updated code, single-click works as intended, but the second click of a double-click in IE is ignored and ends up functioning as a single-click. Is there something that can be adjusted in either the first or second code that I might have overlooked?

First Code:


$('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%"
        });
    } else {
        $this.addClass('clicked');
        setTimeout(function() {
            if ($this.hasClass('clicked')) {
                $this.removeClass('clicked');
                var jobSite = window.open('', '_blank');
                sleep(1000);
                var redirct = getPage(currentID);
                sleep(1000);
                jobSite.location = redirct;
            }
        }, 500);
    }
});

Second Code:


$('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%"
        });
    } else {
        $this.addClass('clicked');
        setTimeout(function() {
            if ($this.hasClass('clicked')) {
                $this.removeClass('clicked');
                var redirct = getPage(currentID);
                jobSite.location = redirct;
            }
        }, 500);
    }
});

Answer №1

Instead of checking for the existence of the clicked class, it is recommended to utilize both .click() and .dblclick(). See below for the updated code:

$('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");
//your double click code goes here

});



$('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

This code snippet provides a solution to the problem:

let timeouts = []; // array to hold timeout references
$('div[id^="jzl_"].short')
    .on('click', function(e) {
        let $this = $(this),
            currentID = e.target.id;

        // add click event to timeout array
        timeouts[timeouts.length] = setTimeout(function() {
            timeouts = []; // reset timeout array
            alert('clicked: ' + currentID);

            // insert your code logic here

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

        // clear two timeouts and reset timeout array
        clearTimeout(timeouts[0]);
        clearTimeout(timeouts[1]);
        timeouts = [];

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

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

You can see a demonstration of this code at http://jsfiddle.net/abc123xyz/4/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Producing numerous results from a single input

How can I ensure that users input their address correctly, including street, number, entrance, floor, and apartment, into a single form field without missing any of the values? Additionally, how can I then extract each value (street, number, entrance, floo ...

Is there a way to incorporate background images into the <option> tags within a <select> dropdown menu?

Not sure if browsers support this feature. It works fine in a div, but that's not very semantically correct. Here is a rough mockup of what I'm trying to achieve: Mockup Link /* CSS for select elements on page */ select { position: relative ...

How do I hide a dropdown menu when the selector's value changes in iOS6?

I'm currently developing a hybrid application using Worklight. When I tap on a select control, a native dropdown appears. However, when I choose an option and the onchange event is triggered, the dropdown doesn't disappear unless I tap on the do ...

JavaScript - the global and local variable dilemma

REVISED2: I'm encountering an issue with converting images to canvas using Pixastic in HTML5. How can I 'return' this converted image back to a global variable? Any suggestions? <img id="mainIllustration" alt="main illustration" src="Img ...

Sorting a datatable in JSF 2 using Ajax when a select list item is selected and a button is clicked

I am trying to implement AJAX functionality in a data table where the data changes and filters based on the selected state from a drop down menu. Here is my current setup: <p>Choose State to Filter By:</p> <h:selec ...

HTML - Table Layout Overlap

I'm struggling with a table layout issue in HTML and could use some assistance. The table below is displaying as overlapping in IE (please refer to the image), but it appears correctly in FF. Can anyone offer some guidance? <div> <table> ...

Calculating the total of an array's values using JavaScript

Receiving information from an API and looking to aggregate the values it contains. Consider the following code snippet: function totalPesos(){ $http.get('/api/valueForTest') .then(function(data){ $scope.resumePesos = data.data.Re ...

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

I am currently working on a project for my Web Engineering course and I am incorporating jQuery to execute an AJAX request to my PHP file using the POST method. The task specifies that "each time the [submit] button is pressed, the form data should be disp ...

Creating a dynamic user interface in Angular 6 that successfully tracks changes without reliance on the parent

As I delve into the world of Angular, I am faced with a challenge in creating a reusable component that will be bundled into an npm module. The issue lies in the UI change detection aspect. In order for the component to function properly, the application ...

Unable to keep button contained within form's card design

Currently enhancing my Bootstrap skills and seeking assistance with a card and form alignment issue. Struggling to properly place a form within a card. Any suggestions or insights on resolving this? <div class="row row-content col-sm-8"> &l ...

Styling for the bootstrap dropdown menu is missing

While attempting to incorporate a bootstrap dropdown menu, I noticed that despite applying the appropriate class to the sublist, the formatting and padding that is typically associated with bootstrap are not being retained. My current setup involves using ...

Adjust text size automatically to fit into a container with a fixed size

Looking to dynamically adjust the font size of user-entered text to fit within a fixed-size div. The goal is to have the text fill the box as much as possible. For example, if the div is 400px x 300px and the user enters "ABC", the font will be very large ...

Setting up an OnMouseOver event for each URL on a webpage

Is there a way to add an OnMouseOver event for all anchor tags on a page, without replacing any existing event handlers that are already in place? I'm looking for guidance on how to achieve this using JavaScript or JQuery. Any suggestions would be gr ...

Transferring data from a table to another window

Currently, I am retrieving values from a database and displaying them in a table. I would like to add a button to each row that will allow users to view more details about that specific row. At the moment, only ThesisID, AuthorID, and Title are visible. ...

Align the position of two divs with matching IDs (#thumb-1 equals #project-1) using JavaScript or jQuery, but without the use of jQuery UI

I am currently working on creating a portfolio gallery and have put together the following HTML structure: <article class="work-gallery"> <ul> <li id="project-1"><img src="http://placehold.it/50x00"></li> ...

Is it possible to execute MongoDB queries from an AS3 client?

Can native Javascript functions for the mongo shell be run on server side from an AS3 client AIR app? I have experience running Javascript methods embedded/loaded in HTML where SWF is also embedded, and I'm curious if it's possible to make a ser ...

Enhance data granularity in Jquery Flot by zooming in as the user interacts

I'm currently working on creating an interactive chart that allows users to zoom in for a more detailed view of the data. For instance, when viewing data over a default zoom period of 3 months, there would be one data point displayed every 24 hours. H ...

Create dynamic animations on HTML text using CSS

Looking to add some flair to your website with a text animation? How about making the text automatically glide from one side to the other like a ticker display? Any suggestions for simple CSS code to achieve this would be greatly appreciated! Thanks in ad ...

Prevent mobile view from activating when zoomed in on the screen

I've built a webpage with a responsive design that adjusts to mobile view on mobile devices or when the screen size is reduced using developer tools. While this functionality works correctly, I have noticed that the design also switches to mobile vie ...

Using PHP to trigger alerts with MySQL data via AJAX from a separate file

I need to notify the first page from the second one, like in the example below: <?php $sql = "SELECT table_id, on, off FROM tables"; // retrieving and populating my table with information $stmt = mysqli_prepare($dbc, $sql); mysqli_stmt_exec ...