In the actual application development, we will often use JS mode events, but sometimes encounter some problems, such as click events, for example, click the form outside the "submit" button to submit the form. Code on it.
Html:
Copy Code code as follows:
<button id= "BTN" > Submit </button>
<form action= "#" method= "get" id= "form" >
<input type= "text" name= "site" value= "www.woiweb.net" readonly/>
<input id= "subbtn" type= "Submit" value= "Do not click this button to submit" onclick= "alert (' I have already submitted ');" />
</form>
Javscript:
Copy Code code as follows:
<script type= "Text/javascript" >
var sub = document.getElementById ("subbtn");
var btn = document.getElementById ("btn");
Common methods
Btn.onclick = function () {
Sub.click ();
}
</script>
After testing, Ie,ff,chrome,opera,safari have no problem, all can submit the form normally.
But in the actual design, in order to make the submission button look better, buildder often use a tag to deal with, add a background image to simulate the button, we still use the above ideas to try, add a a label, let it submit the form, we only modify the HTML.
Html:
Copy Code code as follows:
<button id= "BTN" > Submit </button>
<form action= "#" method= "get" id= "form" >
<input type= "text" name= "site" value= "www.woiweb.net" readonly/>
<!--<input id= "subbtn" type= "Submit" value= "Do not click this button to submit" onclick= "alert (' I have already submitted ');" />-->
<a id= "Subbtn" href= javascript:; "onclick=" alert (' method for submitting a form here ') "> Mock submit button </a>
</form>
Javascript:
Copy Code code as follows:
<script type= "Text/javascript" >
var sub = document.getElementById ("subbtn");
var btn = document.getElementById ("btn");
Common methods
Btn.onclick = function () {
Sub.click ();
}
</script>
After the operation, the problem appeared, IE, FF, opera are OK, but the chrome and safari can not run normally, then the Internet search, found that a label is not the same as the button with the onclick () event, the solution is for IE and FF to write different logic, JS code is as follows:
Javascript:
Copy Code code as follows:
<script type= "Text/javascript" >
var sub = document.getElementById ("subbtn");
var btn = document.getElementById ("btn");
Common methods
Btn.onclick = function () {
Sub.click ();
if (/msie/i.test (navigator.useragent))//ie
{
Sub.fireevent ("onclick");
} else {
var e = document.createevent (' MouseEvent ');
E.initevent (' Click ', False, false);
Sub.dispatchevent (e);
}
}
</script>
At this point, the problem solved, although the problem is very simple, but it is easy to be ignored, posted out and share with you.
Grammar:
CreateEvent (EventType)
Parameter description
EventType the event module name of the events object you want to get. For a list of valid event types, see the "description" section.
return value
Returns the newly created Event object with the specified type.
Thrown
If the implementation supports the type of event that is required, the method throws the code as a Not_supported_err domexception exception.
Description
This method creates a new type of event that is specified by the parameter eventtype. Note that the value of this parameter is not the name of the event interface to be created, but rather the name of the DOM module that defines that interface.
The following table lists the legal values for EventType and the event interfaces created by each value:
Parameter event Interface Initialization method
Htmlevents htmlevent inievent ()
Mouseevents mouseevent inimouseevent ()
Uievents uievent iniuievent ()
After you create an Event object with this method, you must initialize the object with the initialization method shown in the previous table. For more information about initialization methods, see the Event object reference.
The method is not actually defined by the Document interface, but is defined by the Documentevent interface. If an implementation supports the Event module, the Document object implements the Documentevent interface and supports the method.
