HTML 为什么在父元素的点击事件中使用preventDefault()会“禁用”复选框

JavaScript preventDefault() 是一种用于阻止事件的默认行为的方法。它停止事件的发生。在表单提交或链接点击时使用它，可以阻止默认的操作，比如导航到不同的页面或提交表单。该方法在事件对象上调用，并在事件处理函数中使用。

JavaScript preventDefault() 方法：

当我们点击链接时，阻止链接跳转到指定URL。
当我们点击复选框时，阻止复选框的切换。
当我们点击“提交”按钮时，阻止表单的提交。

注意： 并非所有事件都可以取消。我们可以使用 cancelable 属性来判断一个事件是否可取消。

为什么在父元素的点击事件中使用 preventDefault() 会“禁用”复选框？

阻止父元素的点击事件的默认行为会对该父元素内的子元素，比如复选框，产生影响。这是因为JavaScript的事件冒泡和捕获机制。
当事件在DOM元素上触发时，它首先从DOM树的顶部向底部捕获事件，然后再将事件冒泡回到顶部。使用 preventDefault() 方法可以阻止事件向父元素冒泡，从而阻止默认行为的发生。
对于复选框，其默认行为是在点击时切换状态。但是，如果在父元素的点击事件上调用了 preventDefault() ，则阻止了事件向复选框的冒泡，复选框将无法切换。这可能会导致意外的行为，使复选框看起来像是“禁用”了。
为了避免这个问题，在处理复选框或其他交互元素时，需要考虑阻止父元素的默认行为可能带来的影响。如果需要在父元素的点击事件上阻止默认行为，可以使用事件委托来定位特定的子元素并阻止其默认行为。

语法：

event.preventDefault();

现在，让我们通过一些示例来理解。

示例1： 在父级没有使用 JavaScript **PreventDefault() 方法的情况下展示的示例。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
        body { 
            text-align: center;  
            padding-top: 10rem; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2>PreventDefault()</h2> 
      
    <div onclick='Parent()'> 
        <input type="checkbox" onclick="Child()"> 
        Try to check the box 
    </div> 
  
    <script> 
        function Child() { 
            alert('checked ? Yes'); 
        } 
  
        function Parent() { 
            alert('parent Clicked'); 
        } 
    </script> 
</body> 
  
</html>

输出：

HTML 为什么在父元素的点击事件中使用preventDefault()会“禁用”复选框

示例2： 此示例不使用JavaScript并且在父元素上使用 PreventDefault() 。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        body { 
            text-align: center;  
            padding-top: 10rem; 
        } 
  
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h2>PreventDefault()</h2> 
      
    <div onclick='Parent()'> 
        <input type="checkbox" onclick="Child()"> 
        Try to check the box 
    </div> 
  
    <script> 
        function Child() { 
            alert('checked ? No'); 
        } 
  
        function Parent() { 
            event.preventDefault(); 
            alert('parent Clicked'); 
        } 
    </script> 
</body> 
  
</html>

输出：

HTML 为什么在父元素的点击事件中使用preventDefault()会“禁用”复选框