One: event bubbling means: A large container has been set up the event, if the container also contains a small container also set its own events, then because the small container is inside the large container, triggering the event of a small container is also equal to triggering the event of a large container, sometimes this is not the result we want, We can prevent events from bubbling through capability detection such as:
<script type= "Text/javascript" >
$ (function () {
$ (' #da '). CSS (' width ', ' 700px '). CSS (' height ', ' 300px '). CSS (' border ', ' 1px solid Red ');
$ (' DL '). CSS (' width ', ' 500px '). CSS (' height ', ' 210px '). CSS (' border ', ' 1px solid blue ');
$ (' DT '). addclass (' words '). Click (function () {
$ (' dd strong '). CSS (' color ', ' #FF0099 ');
});
$ (' dd ')-css (' width ', ' 330px '). CSS (' height ', ' 210px '). CSS (' border ', ' 1px solid green '). css (' float ', ' left '). CSS (' Margin ', ' 0px auto ');
$ (' #xiao '). CSS (' width ', ' 270px '). CSS (' height ', ' 35px ');
$ (' #xiao >img '). css (' float ', ' right ');
$ (' dd. Daoyan '). Click (function () {
$ (' span '). CSS (' font-weight ', ' bolder ');
})
$ (' dd> #biaoqian '). Click (function () {
$ (' dd. Su '). css (' backgroundcolor ', ' #E0F8EA ');
})
$ (' img[alt= collection of this piece] '). Click (Function (event) {
Alert (' You have successfully collected! ‘);
Event = Event | | window.event;
if (event.stoppropagation) {
IE Browser works
Event.stoppropagation ();
} else {
Event.cancelbubble = true;
}
})
})
</script>
<style type= "Text/css" >
. words
{
width:151px;
height:210px;
BORDER:1PX solid yellow;
Float:left;
}
</style>
<body>
<div id= ' da ' >
<dl>
<dt></dt>
<dd><strong> non-interference (total 36 episodes) <br/> starring:</strong> Su/qin lan/Fu Yiwei et <br/><strong class= "Daoyan" > Director:</strong><span> Lai </span><br/><strong id= "Biaoqian" > tags:</strong>< Span class= "su" > su has friends </span> domestic TV series <span class= "Su" >2013</span> Drama <br/><strong> drama:</strong> Contemporary city, older women Liu Lin, Yang Yang are looking for their own husband. Liu Lin ran into Luks real estate president Lusino, two people became joy Enemy, Encounter secret love Lusino Ding Juan of hate ... <a href= "#" > Click to learn More </a></dd>
</dl>
<div id= "Xiao" ></div>
</div>
</body>
Which <dt></dt>
I put two graphs in my dt tag, I set the DT click event:
$ (' DT '). addclass (' words '). Click (function () {
$ (' dd strong '). CSS (' color ', ' #FF0099 ');
});
Then my second picture Click event will trigger two events at the same time, because all the same in the DT tag
$ (' img[alt= collection of this piece] '). Click (Function (event) {
Alert (' You have successfully collected! ‘);
})
At this point, I can use the ability detection method to determine the browser's parsing ability, according to different browsers choose different methods:
$ (' img[alt= collection of this piece] '). Click (Function (event) {
Alert (' You have successfully collected! ‘);
Cancel event bubbling, to be able to detect, that is, divided IE and non-ie two cases
01. The first ability detection, the event object in IE under the writing is window.event, and in
Non-IE directly with the event;
Event = Event | | window.event;
Second capability detection
if (event.stoppropagation) {
IE Browser works
Event.stoppropagation ();
} else {
Event.cancelbubble = true;
}
})
Second: Cancel the following execution as shown in the example:
<title></title>
<script type= "Text/javascript" >
Click on the A tab without page jumps
Window.onload = function () {
var obj = document.getElementById ("Myhref");
Obj.onclick = function (event) {
Cancel default behavior
return false;
Sub-browser
IE under
01. First Capability Detection
Event = Event | | window.event;
if (Event.preventdefault) {
Non-IE under
Event.preventdefault ();
} else {
Event.returnvalue = false;
}
};
}
</script>
<body>
<a id= "Myhref" href= "http://www.baidu.com" > Go to Baidu </a>
</body>
The click effect of a tag here is originally to jump to the Baidu page, but we can remove the default behavior by the way the Click event will not be followed.
Your code has completed the event binding during page loading, there is no way to block post-bind events, but you can delete the event bindings for the currently specified node. Here's how:
$ ("#btn"). Click (function () {
if ($ ("#tx"). val () = = "") {
Alert ("E1");
}else{
After you delete the bound event ...
$ ("#btn"). Unbind (' click ');
}
});
Description
Unbind ([Type],[data])
The reverse operation of BIND () removes the bound event from each matching element.
If there are no parameters, all bound events are deleted.
You can unbind a custom event that you have registered with bind ().
If the event type is provided as a parameter, only the binding event of that type is deleted.
If you pass a handler function that is passed at bind time as the second argument, only that particular event handler will be deleted.
jquery provides a way to trigger only one click
Obj.one (function () {
});
or cancel the Click event with Obj.unbind ("click")
Cancel subsequent content execution
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
