JavaScript simulates user click event_javascript skills

At first, I thought of using jQuery's click() event to trigger the click event of the hyperlink (the same effect as trigger("click")). The results were found to be unsatisfactory.

The example is as follows:
Rendering
IE:

FireFox:

Copy code The code is as follows:

< ;h3>Please click "Click Me". Test whether the submit button and hyperlink are also clicked.
  Click Me

 
 

Code triggers hyperlink

Copy code The code is as follows:

$(function()
{
$("#btn").click(function()
{
$ ("#submit").click();
         $("#aLink")     .click();                     : When the Me button is clicked, the dialog boxes indicating that the submit button was clicked and the hyperlink was clicked successively pop up, which indicates that the click events of both have been triggered. However, you can see from the address bar that after the click event of the submit button is triggered, it performs its default behavior: submit the form; however, after the click event of the hyperlink is triggered, it does not link to the target address. (Don’t doubt that the submission address of the submit button has an impact on the hyperlink, because if I remove the submit button and leave only the hyperlink, it will not link to the target address.)

Maybe the click() method in jQuery The click event on a hyperlink does not cause it to perform the browser's default behavior (even if you manually add return true, it is useless). Note: tigger("click") is the same as click(). The jQuery documentation says "This function also causes the browser's default behavior of the same name to be executed." The one with the same name? I don't quite understand, but hyperlinks really cannot perform their default behavior. This is the only other way to think of - abandon the events provided by jQuery.

Back to JavaScript's own event - click. The code is as follows:




Copy code

The code is as follows: $(function() { $("#btn").click(function()

{

$("#submit").click();
$("#aLink").get(0) .click();
});
});


Tested in IE and passed... I'm a little excited. However, in fireFox it prompts: click() is not a function. To be honest, IE browser provides things that are very good for developers, but fireFox does not, such as onpropertychange mentioned before. However, we must consider browsers other than IE. After searching for information on the Internet, many people mentioned that to use code to trigger an event in fireFox, the following processing is required:

Copy code

The code is as follows: var evt = document.createEvent("MouseEvents"); evt.initEvent("click", false, false);// Or use initMouseEvent(), but More parameters are needed $("#aLink").get(0).dispatchEvent(evt);

Follow the above method to achieve the function I want, the code is as follows:

Copy code

The code is as follows:

$(function()
{
$("#btn").click(function()
{
$("#submit").click();

if($.browser.msie)
{
$("#aLink").get(0).click();
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
$("#aLink").get(0).dispatchEvent(evt );
       }
     });
}); However, the situation in fireFox is the same as using jQuery's click() event directly. The click event can be triggered, but the hyperlink does not go to the target address (note: the submit button can also be submitted using this method. I want jQuery's click The implementation of () is probably implemented like this). Hey, I think IE is better. hehe.

As a result, this method still does not solve the problem in FireFox. Have to keep looking for other ways.

Since the click event can be triggered in fireFox, but it cannot go to the target address of the hyperlink, you can use js to achieve the jump, that is, use the location object. The code is as follows:




Copy code

The code is as follows: $(function() {

$("#btn").click(function()

{
$("#submit").click();

if($.browser.msie)
              { 🎜>        $( "#aLink").click(function()
    {
      document.location = $(this).attr("href");// window.location = $(this).attr("href" ); It's also possible, but the execution time is different
        }); });
});


You’re done. There is a place to explain: document.location and window.location. Both of these are OK, but their execution time is different, and the execution time of window is earlier. Readers can try it themselves.

Although this example was implemented, there was a problem when it was applied to the project because frameset was used in the project (although many people do not recommend using frameset now, there is nothing you can do if the project uses it. You have to do this ). Therefore, it is necessary to specify in which frame the target url of the link is displayed. However, this cannot be achieved through the target in , because will not perform the default behavior at all and needs to be implemented through js.

We know that document represents the current page (the page where the current execution element is located). If we can find the frame that the current hyperlink URL wants to put into, we can find the document of its object. Of course, it is easy to find the frame you want to put the hyperlink URL into. It is up to you to decide where to put it. The sample code is as follows:




Copy code


The code is as follows:

window.parent.frames['view '].document.location = $("#aLink").attr("href");


Among them, 'view' is the name or id of the frame that the hyperlink URL hopes to be placed in (it is best if the id and name are named the same). It is recommended not to use the above method in IE, but to use the click() method introduced earlier.

All problems have been solved now. Some people may still have this need: write target in , such as and so on. It is hoped that the hyperlink will be triggered according to the target's requirements. Of course, this is a problem with non-IE browsers.

Actually, the method I am going to introduce below is universal. Can be replaced by window.parent.frames['view'].document.location. The code is as follows:

Copy code The code is as follows:

window.open($(this). attr("href"),$(this).attr("target"));

If the target attribute is not defined, it will be treated as '_blank' by default, which is different from the user clicking a hyperlink The effect is different. This method is cross-browser, so you only need to use this method. At this time, return to using jQuery original JavaScript to implement it, which is ultimately the best method in my opinion. The complete final code is as follows:

Copy the code The code is as follows:

    
    
    



    

请单击”Click Me"。测试提交按钮与超链接是否也被单击了。

    Click Me
    

        
        
    

    代码触发超链接

复制代码 代码如下:

    
    
    


    

请单击”Click Me"。测试提交按钮与超链接是否也被单击了。

    Click Me
    

        
        
    

    代码触发超链接

注意：需要此处需要先绑定一个click处理函数，然后再触发click事件
总结：
网上有一些JavaScript模拟用户单击事件的文章，但是都不全面，总会有这样那样的问题。虽然，我在此列举了众多的方法，觉得基本的问题都应该解决了，然而还是有可能有人遇到新的问题。如果遇到什么问题，可以跟我一起探讨……