Home > Web Front-end > JS Tutorial > jquery event execution detection code_jquery

jquery event execution detection code_jquery

WBOY
Release: 2016-05-16 18:39:48
Original
1344 people have browsed it

When doing city search two days ago, I bound an event to the search button. If the text in the input field does not meet the requirements, I will use a label prompt (bind click to the document after the label is displayed, and hide the label after clicking) and make the input The column gets focus. I debugged such a small function for more than 3 hours. IE showed that the label flashed by. Later, I found that the button click event and the input were alternately triggered multiple times. It is estimated that the event rollback occurred. Use The problem was corrected after adding the preventDefault() and stopPropagation() functions. Although the problem is solved, the execution order of events is really difficult to master, so I made a simple event monitoring function that can automatically record page event triggers, see the following code (jquery must be introduced first!...)

Copy code The code is as follows:

//Event execution monitoring
function eventsMonitor(op){
var defaultSetting = {
eventsStr: "click focus blur",
splitStr: " ",
css:{
"border":"1px red solid",
"z -index":9000000,
"background":"white",
"position":"absolute",
width:400,
height:200,
"overflow-x" :"hidden",
"overflow-y":"auto"
}
};
var ops = $.extend(true,defaultSetting,op);
$('< ;div id="DivForLogEvents">
').appendTo("body").css(ops.css);
var $infolog = $("# DivForLogEvents div:eq(0)");
$.each(ops.eventsStr.split(ops.splitStr),function(i,v){
if(v != 'resize')
$("*:not('#DivForLogEvents')").bind(v, function(e){
if(!$(e.target).is("#DivForLogEvents") && !$(e. target).is($infolog)){
$infolog.append((e.target.nodeName||" ") "->" (e.target.id||e.target.Name||" ") " " v " event!
");
$("#DivForLogEvents:not(:animated)").animate({scrollTop:$infolog.height()},300);
}
});
else
$(window).bind('resize', function(e){
if(!$(e.target).is("#DivForLogEvents" ) && !$(e.target).is($infolog)){
$infolog.append((e.target.nodeName||" ") "->" (e.target.id||e .target.Name||" ") " " v " event!
");
$("#DivForLogEvents:not(:animated)").animate({scrollTop:$infolog.height() },300);
}
});
});
}

Example of calling method
Copy code The code is as follows:



< ;head>

Untitled Document
< ;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">





Hello world


ffffffff



Screenshot of effect

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template