Introduction to examples of js preventing bubbling and jquery preventing event bubbling_javascript skills

js prevents bubbling
In the process of preventing bubbling, W3C and IE adopt different methods, so we must make the following compatibility.

Copy code The code is as follows:

function stopPro(evt){
var e = evt || window.event;
//returnValue If this attribute is set, its value has a higher priority than the return value of the event handler. Set this attribute to fasle,
//You can cancel the default action of the source element where the event occurs.
//window.event?e.returnValue = false:e.preventDefault();
window.event?e.cancelBubble=true:e.stopPropagation();
}

Or:

Copy code The code is as follows:

function cancelBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) {
//W3C
evt.stopPropagation();
}
else {
//IE
evt.cancelBubble = true;
}

JQuery provides two ways to prevent event bubbling.
Method 1: event.stopPropagation();

Copy code The code is as follows:

$("#div1").mousedown(function(event){
event.stopPropagation();
});

Method 2: return false;

Copy code The code is as follows:

$("#div1").mousedown(function(event){
return false;
});

Jquery blocks the default action, that is, notifies the browser not to perform the default action associated with the event.
For example:

Copy code The code is as follows:

$("a"). click(function(event){
event.preventDefault(); //Prevent the default action, that is, the link will not jump.
alert(4);//But this will also pop up
event.stopPropagation ();//Prevent bubbling events, the superior click event will not be called
return false;//Not only prevents the event from bubbling up, but also prevents the event itself
});

But there is a difference between these two methods. Returning false not only prevents the event from bubbling up, but also prevents the event itself. event.stopPropagation() only prevents the event from bubbling up, but does not prevent the event itself.
Scenario application: Google and Baidu's association boxes. When a drop-down list pops up, the user needs to keep the cursor in the text input box when pressing the mouse in the drop-down list area.
Jquery case:

Copy code The code is as follows:

aaaaaaa

baidu.com

js case:

Copy code The code is as follows:

function tt(){
alert("div");
}
function ttt(){
var e = arguments.callee. caller.arguments[0] || window.event;
window.event?e.returnValue = false:e.preventDefault();
alert(3);
window.event?e.cancelBubble: e.stopPropagation();
alert(4);
}

ccccc
baidu.com
< /div>

Statement：

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