最容易记住的方法:防止Default () → 停止浏览器的默认动作. stop propagation ()- 阻止事件通过 DOM 。
事件。
防范 它能防止浏览器与事件相关的内置行为.
示例:点击链接。
Google 文档.getElementById ("link").addEventListener ("click"), (event") {event. prevent Default (";";";";";" 通常: 点击 \"浏览器导航到Google Would Default (): 点击 \\\ recept Default () 浏览器不导航 一般用途: // 格式提交事件. prevent Default (); / 拖放浏览器行为事件. prevent Default (); 事件. stopPropagation () 这样可以防止事件通过父母/子女元素上下涌出.
示例: 点击我 父. addEvent listener ("点击"), () { { control.log ("父母点击") ;}; child.ad Event listener ("点击", (event) { 事件. stopPropagation (); 控制台.log ("点击了按钮") ; 不停止Propagation (): 点击按钮 ++ 按钮处理器 ++ 父处理器 输出: 点击按钮 父处理器 点击停止 Propagation (): 点击按钮 ++ 按钮处理器 ++ 停止 Propagation () ++ 父处理器 不接受此事件 重要区别 想象: 如点击按钮: 防止 Default () 按钮. add Event listener ("点击"), (event) { 事件. prevent Default ();} ; 该事件仍然可以被传播: Button QQ Anchor QQ Card 但是浏览器的默认动作(例如跟随链接)被阻止了.
停止 Propagation () 按钮。
添加 Event Listener ("单击"), (活动) {{事件. stopPropagation ();}; 该活动不会通过 DOM 继续:按钮 QQ / Anchor/ Card 处理器 但浏览器的默认行为并没有被自动取消.
你能同时使用吗?
是.
按钮. add Event Listener ("单击"), (event) {{event. preventDefault (); event. stopPropagation (; )}; 现在您要说的是: 不要执行浏览器的默认动作 。
不要让这个事件达到其他元素.