At first, I thought of the Click () event in jquery to trigger the hyperlink's clicked event (the same effect as trigger ("click"). It turned out to be unsatisfactory.
Examples are as follows:
Effect chart
Ie:
FireFox:
Copy Code code as follows:
<button id= "BTN" >click me</button>
<form action= "#" >
<input type= "text" name= "UserName" value= "Xu Neuhua-polaris" readonly/>
<input id= "Submit" type= "Submit" value= "Do not click this button to submit" onclick= "Alert (' click event that triggers the Submit button! ');" />
</form>
<a id= "ALink" href= http://www.google.cn "onclick =" alert (' Triggers a hyperlink click event! ');" > Code triggers Hyperlink </a>
Copy Code code as follows:
$ (function ()
{
$ ("#btn"). Click (Function ()
{
$ ("#submit"). Click ();
$ ("#aLink"). Click ();
});
});
When you click the: Click the Me button, the Submit button is clicked and the hyperlink is clicked, which indicates that both of the clicked events are triggered. However, as you can see from the Address bar, the Submit button's Click event is triggered to perform its default behavior: Submit the form, but the hyperlink's click event is not linked to the destination address when it is triggered. (Do not suspect that the submit button's submit address has an effect on the hyperlink because I remove the submit button and leave the hyperlink not linked to the destination address.) ）
Maybe the Click () method in jquery does not cause the hyperlink to perform the default behavior of the browser (even if you add the return true manually). Note: Tigger ("click") is the same as Click (). The jquery document says "This function also causes the default behavior to be executed by the browser with the same name." With the same name? Not quite clear, but hyperlinks do not perform its default behavior. This is just another way to get rid of the events provided by jquery.
Back to JavaScript own event--click. The code is as follows:
Copy Code code as follows:
$ (function ()
{
$ ("#btn"). Click (Function ()
{
$ ("#submit"). Click ();
$ ("#aLink"). Get (0). Click ();
});
});
In IE in a test, passed the ... A little excited. However, in Firefox is prompted: Click () is not a function. To be honest, the things that IE browsers offer are good for developers, but Firefox doesn't, for example, the Onpropertychange mentioned earlier. However, we must consider the browser outside IE. Check the data on the Internet, there are many people mentioned in Firefox to use code to trigger an event, you need to deal with the following:
Copy Code code as follows:
var evt = document.createevent ("mouseevents");
Evt.initevent ("Click", False, false);//or with initmouseevent (), but more parameters are required
$ ("#aLink"). Get (0). dispatchevent (EVT);
Follow the above method to achieve the function I want, the code is as follows:
Copy Code code 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);
}
});
});
At this time, in IE is completely normal. However, the situation in Firefox, like the direct use of the jquery Click () event, triggers the Click event, and the hyperlink does not go to the destination address (note: The Submit button is also capable of submitting this method, I think the implementation of jquery click () is probably the implementation of this). Hey, I think it's better ie. Oh.
In this way, this approach still does not solve the problem in Firefox. We have to keep looking for other ways.
Since in Firefox can trigger click events, but can not go to the destination address of the hyperlink, then, you can use JS to achieve the jump, that is: the use of Location objects. The code is as follows:
Copy Code code as follows:
$ (function ()
{
$ ("#btn"). Click (Function ()
{
$ ("#submit"). Click ();
if ($.browser.msie)
{
$ ("#aLink"). Get (0). Click ();
}
Else
{
Bind order hit Event
$ ("#aLink"). Click (Function ()
{
Document.location = $ (this). attr ("href");//window.location = $ (this). attr ("href"); Yes, but the time is different.
});
Trigger Click event
$ ("#aLink"). Click ();
}
});
});
That's it. There is a place to explain: Document.location and window.location. Both of these can be done, but their execution times are different, and window execution time is earlier. Readers can try it on their own.
Although this example is implemented, it is problematic to apply to the project because the project uses frameset (although many people now do not recommend the use of frameset, but the project does not have the means to do so). It is therefore necessary to specify which frame the target URL of the link is displayed in, however, it cannot be achieved through target in <a> because <a> does not perform the default behavior at all and needs to be implemented through JS.
We know that document represents the current page (the page on which the current execution element is located). If we can find the URL of the current hyperlink that we want to put in, we can find the document of its object. Of course, find the hyperlink URL you want to put in the frame is easy, it is up to you decide where to put it. The sample code is as follows:
Copy Code code as follows:
window.parent.frames[' view '].document.location = $ ("#aLink"). attr ("href");
Where ' view ' is the name or ID of the frame you want the hyperlink URL to put in (preferably the ID and name name). It is recommended that IE do not use the above method, and use the Click () method described earlier.
All the problems have been solved now. There may also be a need to write target in <a>, such as <a target= "_blank" ></a>. You want to trigger the hyperlink at Target's request. Of course, this is not a problem with IE browsers.
In fact, the next approach I'm going to introduce is generic line. Can replace window.parent.frames[' view '].document.location. The code is as follows:
Copy Code code as follows:
window.open ($ (this). attr ("href"), $ (this). attr ("target"));
If the target attribute is not defined, the default is treated as ' _blank ', which is not the same as when the user clicks the hyperlink. This approach is cross-browser, so you just need to do it this way. At this time, back to the original javascirpt with jquery+ to achieve, when the final, personally think the best way. The complete final code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>javascript Analog User Click event--Xu Neuhua polaris</title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--introduction of jquery-->
<script type= "Text/javascript" src= "Scripts/jquery/jquery-1.3.2.js" ></script>
<script type= "Text/javascript" >
/**
* Simulate a user Click event to handle a hyperlink problem
* @author Xuxinhua
*/
$ (function ()
{
$ ("#btn"). Click (Function ()
{
$ ("#submit"). Click ();
Bind order hit Event
$ ("#aLink"). Click (Function ()
{
window.open ($ (this). attr ("href"), $ (this). attr ("target"));
});
Triggers a click event (a click event handler that performs all bindings)
$ ("#aLink"). Click ();
});
});
</script>
<body>
<button id= "BTN" >click me</button>
<form action= "#" >
<input type= "text" name= "UserName" value= "Xu Neuhua-polaris" readonly/>
<input id= "Submit" type= "Submit" value= "Do not click this button to submit" onclick= "Alert (' click event that triggers the Submit button! ');" />
</form>
<a id= "ALink" href= "http://www.google.cn" target= "onclick =" alert (' Triggers a hyperlink click event! ');" > Code triggers Hyperlink </a>
</body>
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>javascript Analog User Click event--Xu Neuhua polaris</title>
<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This are my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--introduction of jquery-->
<script type= "Text/javascript" src= "Scripts/jquery/jquery-1.3.2.js" ></script>
<script type= "Text/javascript" ><!--
/**
* Simulate a user Click event to handle a hyperlink problem
* @author Xuxinhua
*/
$ (function ()
{
$ ("#btn"). Click (Function ()
{
$ ("#submit"). Click ();
Bind order hit Event
$ ("#aLink"). Click (Function ()
{
window.open ($ (this). attr ("href"), $ (this). attr ("target"));
});
Triggers a click event (a click event handler that performs all bindings)
$ ("#aLink"). Click ();
});
});
--></script>
<body>
<button id= "BTN" >click me</button>
<form action= "#" >
<input type= "text" name= "UserName" value= "Xu Neuhua-polaris" readonly/>
<input id= "Submit" type= "Submit" value= "Do not click this button to submit" onclick= "Alert (' click event that triggers the Submit button! ');" />
</form>
<a id= "ALink" href= "http://www.google.cn" target= "onclick =" alert (' Triggers a hyperlink click event! ');" > Code triggers Hyperlink </a>
</body>
Note: You need to bind a click handler function here before triggering the Click event
Summarize:
There are some JavaScript simulation users click the event of the article, but not comprehensive, there will always be such a problem. Although I have listed a number of methods here, I feel that the basic problems should be solved, however, it is possible that some people encounter new problems. If you encounter any problems, you can discuss with me ...
