Simulate mouse click using jQuery

0

We’ve talked about simulating mouse click in C language. Today, we’ll learn how to simulate mouse click in jQuery. There seem quite a few methods to simulate a mouse click event:

  • $(“#myanchor”).click();
  • $(“#myanchor”).trigger(“click”);
  • $(“#myanchor”)[0].click();

In fact, the first method is a shortcut for the second method. jQuey.click() is baddy designed for different signatures of this function have totally different semantics, which is a very bad programming habit. jQuery.click()(without parameters) is used to trigger the click event for an element, while jQuery.click(function) is used to bind a function to the click event for an element. jQuery.click(function) is the shortcut for jQuery.on(“click”,function).

I’m interested with the difference between $().click() and $()[0].click() because sometime $().click() does not work while   $()[0].click() always works. What is jQuery()[0]? Well, it is the DOM element that is wrapped by jQuery. We can get the type of the javascript object as follows:

console.log(Object.prototype.toString.call($( "#myanchor" )[0]));
//[object HTMLAnchorElement]

You can see it is an  HTMLAnchorElement object. We can see the difference between jQuery click and DOM click in the following example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>click demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<a id="myanchor" href="https://myprogrammingnotes.com">myanchor</a>
<button>button</button>
<script>

$("#myanchor").on("click",function(){alert("hello from jquery");});
console.log($( "#myanchor" ).eq(0)[0] instanceof HTMLAnchorElement);
console.log(Object.prototype.toString.call($( "#myanchor" )[0]));
document.getElementById("myanchor").addEventListener("click", function(){ alert("Hello World!"); }); 
$("button").click(function() {
  //setTimeout(function(){$( "#myanchor" )[0].click();},5000);
  setTimeout(function(){$( "#myanchor" )[0].click();},5000);
});
</script>
 
</body>
</html>

 

jQuery’s click can only trigger the event handlers registered by jQuery.on(“click”,handler) or using the onclick attribute of the element. We know that in native javascript, the common method to attach an event handler to an element is addEventListener. This kind of event listeners, however, cannot be triggered by jQuery.click(). In other words, jQuery click cannot mimic native browser events so it won’t trigger the default behavior of the DOM element such as navigating to the url specified in href, it won’t trigger the event handler attached by addEventListener,either. To simulate the native click event, you should call the click method of the DOM object: jQuery()[0].click. After triggering the event, all event handlers regardless it being attached by jQuery.on() or javascript addEventListener, or using the onclick attribute, together with the default behavior,i.e.,navigating to the url, are called.

The difficulties in simulating mouse click are not knowing the difference between jQuery click and DOM click, but other issues. First, it may be difficult to know which element you should trigger the click event for. You know the UI element to click on, but the HTML element under the UI element may not be obvious. Several HTML tags may exist at the same area of the web page. They may be parent and child. Sometimes, you need to try to know exactly which element the actual event handler is bound to. The second issue is some “click” may not be real click. It is just mousedown and mouseup.  I mean, the event handler is bound to the mousedown/mouseup event rather than the click event. In this case, you should trigger tne mousedown/mouseup event: jQuery().trigger(“mousedown”) or jQuery().trigger(“mouseup”);

 

 

Leave a Reply