In actual application development, we often use JS module events, but sometimes we encounter some problems, such as click events. For a simple example, click the "Submit" button outside the form to submit the form. Let’s code.
Html:
Copy the code code as follows:
<h3> Please click "Submit", and the click event of the test submit button is also triggered. </h3>
<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="Don't click this button to submit yet" onclick="alert('I have submitted');"/>
</form>
Javscript:
Copy the code code as follows:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//general method
btn.onclick = function() {
sub.click();
}
</script>
After testing, there are no problems with IE, FF, Chrome, Opera, and Safari, and the form can be submitted normally.
But in actual design, in order to make the submit buttons look better, builders often use a tag to process them and add a background image to simulate the button. We still use the above idea to try and add an a tag to let it submit. Form, we only modify the html.
Html:
Copy the code code as follows:
<h3> Please click "Submit", and the click event of the test submit button is also triggered. </h3>
<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="Don't click this button to submit yet" onclick="alert('I have submitted');"/> -->
<a id="subbtn" href="javascript:;" onclick="alert('Call the method to submit the form here')">Simulate submit button</a>
</form>
Javascript:
Copy the code code as follows:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//general method
btn.onclick = function() {
sub.click();
}
</script>
After running, the problem occurred. IE, FF, and Opera were all OK, but Chrome and Safari could not run normally. Later, I searched online and found that the a label does not have the same onclick() event as the button. The solution is for IE and FF writes different logic, the JS code is as follows:
javascript:
Copy the code code as follows:
<script type="text/javascript">
var sub = document.getElementById("subbtn");
var btn = document.getElementById("btn");
//general method
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 is solved. Although this problem is very simple, it is easily ignored by everyone. I posted it to share with everyone.
grammar:
createEvent(eventType)
Parameter description
eventType is the event module name of the Event object that you want to obtain. See the Description section for a list of valid event types.
return value
Returns a newly created Event object of the specified type.
Throw
If the implementation supports the required event type, this method will throw a DOMException with code NOT_SUPPORTED_ERR.
illustrate
This method creates a new event type specified by the eventType parameter. Note that the value of this parameter is not the name of the event interface to be created, but the name of the DOM module that defines that interface.
The following table lists the legal values for eventType and the event interface created by each value:
Parameter event interface initialization method
HTMLEvents HTMLEvent iniEvent()
MouseEvents MouseEvent iniMouseEvent()
UIEvents UIEvent iniUIEvent()
After creating the Event object using this method, the object must be initialized using the initialization method shown in the table above. For more information about initialization methods, see Event Object Reference.
This method is actually not defined by the Document interface, but by the DocumentEvent interface. If an implementation supports the Event module, then the Document object implements the DocumentEvent interface and supports this method.