JavaScript 中 preventDefault() 和 stopPropagation() 方法的区别

在本文中，我们将讨论PreventDefault 和stopPropagation 方法，并为每个条件提供合适的代码示例，然后我们将看到PreventDefault 与stopPropagation 之间的区别。

preventDefault() 方法：它是事件接口中存在的方法。此方法可防止浏览器执行所选元素的默认行为。只有在事件可取消的情况下，此方法才能取消事件。例如，有些事件是无法阻止的，例如滚动和滚轮事件。

句法：

event.preventDefault();

参数：此方法不接受任何参数。

我们将在示例的帮助下看到应用这两种方法的方法。

示例 1：阻止链接跟随 URL，以使浏览器无法转到另一个页面。

HTML

 

 
    
    
    

 

    
        GeeksForGeeks
    
     
    
        $("#first").click(function () {
            event.preventDefault();
            alert("Event prevented, Can't go there.");
        });
    

 

输出：

示例 2：它 防止用户检查复选框。通常，当我们单击复选框时，它会切换，但在调用 preventDefault() 方法后什么都不会起作用。

HTML

 

 
    
    
    

 

    
    click on this box
     
    
        $("#f").click(function () {
            event.preventDefault();
            alert("Event prevented");
        });
    

 

输出：

stopPropagation() 事件方法：该方法用于阻止父元素访问事件。基本上，此方法用于防止调用相同事件的传播。例如，  我们在div标签中有一个button元素，并且它们都有一个onclick事件，然后每当我们尝试激活附加到button元素的事件时，附加到div元素的事件也会被执行，因为div 是父元素的按钮元素。

句法：

event.stopPropagation();

我们可以通过使用stopPropagation()方法来解决这个问题，因为这会阻止父级访问事件。

示例 1：

HTML

 

 
    
    
    

 

    
        
            Button
        
    
     
    
        function functionSecond() {
            alert("button hello");
        }
        function functionFirst() {
            alert("div hello");
        }
    

 

输出：

在这里，点击按钮后， 这两个函数都将被执行。

示例 2：

HTML

 

 
    
    
    

 

    
        
            Button
        
    
     
    
        function functionSecond() {
            event.stopPropagation();
            alert("button hello");
        }
        function functionFirst() {
            alert("div hello");
        }
    

 

输出：

现在，在这种情况下，我们添加了一个event.stopPropagation()方法，然后将执行按钮元素的唯一函数。

preventDefault() 与 stopPropagation() 方法之间的区别：

event.preventDefault() Method	event.stopPropagation() Method
Prevent the default action of browsers taking on that event.	Prevent further propagation of current events by parent or child elements.
It is a method present in the Event interface.	This method is also present in the Event interface.
For example, it prevents the browser from following a link.	It can not stop the default behavior of the browser.
Its syntax is -: event.preventDefault();	Its syntax is -: event.stopPropagation();
This method does not take any parameters	This method also does not take any arguments in its definition
Its supported browsers are -: chrome, firefox, safari, opera, etc	Its supported browsers are -: chrome, firefox, safari, opera, etc
It does not return value	It does not have any return type
Its uses the DOM version of DOM Level 3 Events	Its uses the DOM version of DOM Level 2 Events