JavaScript simulate user Click Event _ javascript skills

Source: Internet
Author: User
Click a button or hyperlink, and other hyperlinks will appear. In this case, you must click a hyperlink to display an initial Page. (The company page uses frameset) Obviously, the subsequent hyperlink click event needs to be triggered through JavaScript. At first, I thought of using jQuery's click () event to trigger the hyperlink's click Event (the same effect as trigger ("click ). The results are unsatisfactory.

Example:

IE:

FireFox:

The Code is as follows:


Click "Click Me ". Test whether the submit button and hyperlink are also clicked.
Click Me

Code-triggered hyperlink


The Code is as follows:


$ (Function ()
{
$ ("# Btn"). click (function ()
{
$ ("# Submit"). click ();
$ ("# ALink"). click ();
});
});


When the: Click Me button is clicked, a dialog box is displayed, indicating that the Click events of both are triggered. However, you can see from the address bar that after the Click Event of the submit button is triggered, it executes its default behavior: Submit Form; however, after the Click Event of the hyperlink is triggered, there is no link to the target address. (Do not doubt that the submission address of the submit button has an impact on the hyperlink. Because I removed the submission button, leaving only the hyperlink does not link to the target address .)

Maybe the click () method in jQuery does not execute the default browser behavior for the hyperlink click Event (even if you manually add return true ). Note: tigger ("click") is the same as click. In the jQuery document, "this function will also lead to the execution of default behaviors with the same name in the browser ". ? Not quite clear, but the hyperlink does not really execute its default behavior. This is the only way to do this-discard the events provided by jQuery.

Return to the JavaScript event -- click. The Code is as follows:

The Code is as follows:


$ (Function ()
{
$ ("# Btn"). click (function ()
{
$ ("# Submit"). click ();
$ ("# ALink"). get (0). click ();
});
});


I passed the test in IE ...... A little excited. However, the prompt in fireFox is: click () is not a function. To be honest, what IE provides is good for developers, but fireFox does not, such as onpropertychange mentioned earlier. However, we must consider browsers other than IE. Many people have mentioned that the code used to trigger an event in fireFox should be handled as follows:

The Code is as follows:


Var evt = document. createEvent ("MouseEvents ");
Evt. initEvent ("click", false, false); // or use initMouseEvent (), but more parameters are required.
$ ("# ALink"). get (0). dispatchEvent (evt );


Use the above method to implement the desired function. The Code is as follows:

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 );
}
});
});


In this case, it is completely normal in IE. However, in fireFox, the click event can be triggered just like the click () event of jQuery, but the hyperlink is not forwarded to the target address (note: the submit button can also be submitted using this method. I think jQuery's click () implementation is probably like this ). Ah, I think IE is better. Haha.

As a result, this method still cannot solve the problem in FireFox. You have to continue searching for other methods.

Since the click event can be triggered in fireFox, but cannot be redirected to the URL of the hyperlink, you can use js to achieve the jump, that is, using the location object. The Code is as follows:

The Code is as follows:


$ (Function ()
{
$ ("# Btn"). click (function ()
{
$ ("# Submit"). click ();

If ($. browser. msie)
{
$ ("# ALink"). get (0). click ();
}
Else
{
// Bind a click event
$ ("# ALink"). click (function ()
{
Document. location = $ (this ). attr ("href"); // window. location = $ (this ). attr ("href"); yes, but the execution time is different.
});

// Trigger a click event
$ ("# ALink"). click ();
}
});
});


In this way, the success is achieved. There is a place to note: document. location and window. location. Both of them are acceptable, but their execution time is different, and the execution time of window is earlier. You can try it on your own.

Although this example is implemented, there is a problem when it is applied to the project, because frameset is used in the project. (although many people do not recommend using frameset, there is no way to use the project, ). Therefore, you need to specify the frame in which the target url of the link is displayed. However, the target in the request cannot be implemented, because the default behavior is not executed at all and must be implemented through js.

As we know, document represents the current page (the page where the current execution element is located ). If we can find the frame in which the url of the current hyperlink is to be placed, we can find the document of its object. Of course, it is easy to find the frame to which the hyperlink url is to be placed. It is up to you to decide where to put it. The sample code is as follows:

The Code is as follows:


Response response parent.frames{'view'}.doc ument. location = $ ("# aLink"). attr ("href ");


Here, 'view' is the name or id of the frame to be placed in the hyperlink url (preferably the same name as the id and name ). We recommend that you use the click () method instead of the preceding method in IE.

All problems have been solved. Some people may have this requirement: Write target, such as in the middle. You want to trigger a hyperlink as required by the target. Of course, this is a non-IE browser problem.

In fact, the method I will introduce below is generic. You can replace paipaiparent.frames{'view'}.doc ument. location. The Code is as follows:

The Code is as follows:


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


If the target attribute is not defined, it is treated as '_ blank' by default, which is different from the effect of clicking a hyperlink. This method is cross-browser, so you only need to use this method. At this time, we will use jQuery + original JavaScirpt to implement it. In this case, I personally think the best method. The complete final code is as follows:

The Code is as follows:





JavaScript simulated user click event -- Xu Xinhua polaris






Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.