When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

Question

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

After reviewing various solutions online, I noticed that they all function properly on Chrome and Firefox but encounter issues with Internet Explorer when interacting with an SVG. For instance, consider the following code snippet:

$(document).on("click",(e) => {
    this._handleDocumentClick(e);
});

_handleDocumentClick(e) { 
    let container = $(".myClass");

    if (container.has(e.target).length === 0) { 
        alert('clicked outside');
    }
}

In IE, this code fails to work correctly when clicking on an SVG element (and possibly an image as well). Despite the SVG being located inside my designated container, the script incorrectly registers it as an external click!

When printing e.target, the following element (and its length) is displayed:

https://i.stack.imgur.com/dACze.png

Any suggestions or insights on how to resolve this issue?

javascript jquery html svg

Answer 1

Answer №1

Take a unique approach by utilizing jQuery's .closest() method to check if the target element is a child of the container:

var $container = $('.target');

$('body').on('click', function(evt) {
  var $target = $(evt.target);

  if ( $target.closest($container).length ) { 
    console.log('❌ click inside');
  }
  else {
    console.log('✅ click outside');
  }

});

You can view a demo of this in action, compatible with IE9+ http://jsbin.com/qoqume/edit?html,js,console,output

Answer 2

Take a unique approach by utilizing jQuery's .closest() method to check if the target element is a child of the container:

var $container = $('.target');

$('body').on('click', function(evt) {
  var $target = $(evt.target);

  if ( $target.closest($container).length ) { 
    console.log('❌ click inside');
  }
  else {
    console.log('✅ click outside');
  }

});

You can view a demo of this in action, compatible with IE9+ http://jsbin.com/qoqume/edit?html,js,console,output

Answer 3

Answer №2

The solution lies within the correspondingUseElement property:

For Internet Explorer only:https://msdn.microsoft.com/en-us/library/ff971929(v=vs.85).aspx

Instead of e.target, you can access it through e.target.correspondingUseElement in condition that

e.target.correspondingUseElement !== 'undefined'

Answer 4

The solution lies within the correspondingUseElement property:

For Internet Explorer only:https://msdn.microsoft.com/en-us/library/ff971929(v=vs.85).aspx

Instead of e.target, you can access it through e.target.correspondingUseElement in condition that

e.target.correspondingUseElement !== 'undefined'

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

Answer №1

Answer №2

Similar questions

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

Encountering a difficulty in sending data to the server through ajax with Cordova

The Angular controller fails to execute upon startup in the Ionic app

Having trouble extracting the ID from the URL using parameters

What is the best way to retrieve data from a POST request?

What is the proper way to define the type for a functional React component by using object destructuring on props?

Even though there is an error in the line of code saying "Error in render: RangeError: Invalid array length", it still manages to perform its intended task

Having difficulty implementing pagination functionality when web scraping using NodeJS

The socket.on event appears to be triggering multiple times with each response

Issue with Vue class binding failing to update when state is modified

The JQuery datepicker fails to display the current date

The entire DOM has been seamlessly replaced by React.JS within the Node.js server

Alter the class of the div element every three seconds

The Node.js server delivers a different object to the client

Issue: Proper handling of data serialization from getStaticProps in Next.js

Using NicEdit for uploading to your personal server

The requested API endpoint for retrieving the name could not be found on the Express

Locating the Active Object's Coordinates in fabric.js

Is there a discrepancy in the value between data and computed properties in Vue components?

Maintaining the order of subscribers during asynchronous operations can be achieved by implementing proper synchronization