开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

单击父元素时JS函数，单击子元素时返回false

当单击父元素时，可以使用JavaScript函数来处理该事件。可以通过给父元素添加一个点击事件监听器来实现这一功能。当父元素被单击时，该事件监听器会触发相应的JavaScript函数。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>点击父元素示例</title>
  <script>
    function parentClick() {
      console.log("父元素被单击了");
    }
  </script>
  <style>
    #parent {
      width: 200px;
      height: 200px;
      background-color: lightblue;
    }
    #child {
      width: 100px;
      height: 100px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div id="parent" onclick="parentClick()">
    <div id="child" onclick="return false;"></div>
  </div>
</body>
</html>

在上面的示例中，当单击父元素时，会触发parentClick()函数，并在控制台输出"父元素被单击了"。而当单击子元素时，会返回false，阻止事件冒泡到父元素，从而不会触发父元素的点击事件。

这种技术可以用于处理特定的交互需求，例如在某些情况下需要单击子元素时不触发父元素的点击事件。

相关搜索:单击父元素而不是子元素时是否运行函数？React.js在父元素单击时修改子元素如何在单击子元素时停止父元素上的单击事件单击React JS时删除父元素单击时获取子元素- Vue JS 单击父级时获取子元素的id on :在svelte中还单击任何子元素时，都会触发对父元素的单击如何通过单击父元素来检测子元素？当我们单击元素时，如何旋转元素的子元素？Angular:如何在单击子元素时将类添加到父元素防止子元素在子菜单项单击时触发父事件如何在单击或dbl单击父元素时展开树列表的子节点？单击子组件中的元素时更新父组件的状态防止在单击子对象时单击父对象单击按钮时显示元素单击按钮时删除元素单击时的导航元素循环时无法单击元素单击其他元素时打开页脚元素 JavaScript:在单击事件时获取父元素值

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

事件高级

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。生活中的代理：咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。...js事件中的代理： ? 事件委托的原理给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

1.5K4 1

事件高级

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。生活中的代理： ? js事件中的代理： ?...（给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。）

1.4K2 0

事件高级

解决: e = e || window.event; 　　只要“||”前面为false, 不管“||”后面是true 还是 false，都返回 “||” 后面的值。　　...只要“||”前面为true, 不管“||”后面是true 还是 false，都返回 “||” 前面的值。...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。生活中的代理：咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。...事件委托的原理给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。事件委托的作用我们只操作了一次 DOM ，提高了程序的性能。

1.2K1 0

前端成神之路-WebAPIs03

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？ ?...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。生活中的代理： ? js事件中的代理： ?...事件委托的原理给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。事件委托的作用我们只操作了一次 DOM ，提高了程序的性能。

3K2 0

「Web编程API」- 03

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。...生活中的代理 js事件中的代理事件委托的原理给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

1.4K5 0

5、React组件事件详解

ReactEvent 通过设置原生事件绑定为冒泡阶段调用，且每次测试单击子元素按钮：在子元素原生事件程序中阻止事件传播，则打印出：子元素原生事件绑定事件触发；在父元素元素事件程序中阻止事件传播...，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发在子元素React合成事件onClick中阻止事件传播，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发...子元素React合成事件绑定事件触发在父元素React合成事件onClick中阻止事件传播，则打印出：子元素原生事件绑定事件触发父组件原生事件绑定事件触发子元素React合成事件绑定事件触发...父组件React合成事件绑定事件触发可以看到若不阻止事件传播每次（单击子元素）事件触发流程是： Document->子元素（原生事件触发）->父元素（原生事件）->回到Document->React...子元素合成事件监听器触发 ->React父元素合成事件监听器触发其实，React合成事件封装的stopPropagtion函数在调用时给自己加了个isPropagationStopped的标记位来确定后续监听器是否执行

3.7K1 0

深入JavaScript之BOM、DOM和事件

如果用户点击确定按钮，则方法返回true 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框。...谁调用我，我关谁 open() 打开一个新的浏览器窗口返回新的Window对象与定时器有关的方式 setTimeout() 在指定的毫秒数后调用函数或计算表达式。...参数： js代码或者方法对象毫秒值返回值：唯一标识，用于取消定时器 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。...removeChild() ：删除（并返回）当前节点的指定子节点。 replaceChild()：用新节点替换一个子节点。属性 parentNode 返回节点的父节点。...如何绑定事件直接在html标签上，指定事件的属性(操作)，属性值就是js代码事件：onclick— 单击事件通过js获取元素对象，指定事件属性，设置一个函数代码： <img

2.9K3 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

offsetParent(),返回第一个匹配元素用于定位的父节点。 •这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。...B.children() 获得所有子元素（CDEF） A.find(D) 从A子元素中查询D D.parent() 获得D的父元素（B） C.next() 下一个兄弟（D） C.nextAll...可以在父元素上检测子元素获取焦点的情况。...事件,而不触发和元素上的 click事件.当单击元素时,只触发元素上的click事件, 而不触发元素上的click事件....•callback:载入成功时回调函数。 •type:返回内容格式，xml, html, script, json, text, _default。

8.3K2 0

笔记35-JavaScript高级

直接在html标签上，指定事件的属性(操作)，属性值就是js代码 1. 事件：onclick--- 单击事件 2....通过js获取元素对象，指定事件属性，设置一个函数 * 代码： ...* 如果用户点击确定按钮，则方法返回true * 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框。...* removeChild() ：删除（并返回）当前节点的指定子节点。 * replaceChild()：用新节点替换一个子节点。...* 属性： * parentNode 返回节点的父节点。 * HTML DOM 1. 标签体的设置和获取：innerHTML 2. 使用html元素对象的属性 3.

1.3K3 0

前端基础-JavaScript(二)

直接在html标签上，指定事件的属性(操作)，属性值就是js代码 1. 事件：onclick--- 单击事件 2....通过js获取元素对象，指定事件属性，设置一个函数 * 代码： ...* 如果用户点击确定按钮，则方法返回true * 如果用户点击取消按钮，则方法返回false prompt() 显示可提示用户输入的对话框。...* removeChild() ：删除（并返回）当前节点的指定子节点。 * replaceChild()：用新节点替换一个子节点。...* 属性： * parentNode 返回节点的父节点。 * HTML DOM 1. 标签体的设置和获取：innerHTML 2. 使用html元素对象的属性 3.

1.5K1 0

Web阶段：第五章：JQuery库

2.parent > child 子元素选择器：在给定的父元素下匹配所有的子元素 3.prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素 4.prev ~ sibings...([exp|ele][,fil])1.6* 查找相邻相邻元素一致到结束 offsetParent() 返回第一个匹配元素用于定位的父节点。...这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。...parent([expr]) 返回父元素 parents([expr]) 返回所有祖先元素 parentsUntil([exp|ele][,fil])1.6* 返回所有祖先元素直到满足表达式为止 prev...在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

26.3K2 0

阿里前端二面必会react面试题总结1

通过在 shouldComponentUpdate方法中返回 false, React将让当前组件及其所有子组件保持与当前组件状态相同。如何用 React构建（ build）生产模式？...参考前端进阶面试题详细解答hooks父子传值父传子在父组件中用useState声明数据 const [ data, setData ] = useState(false)把数据传递给子组件...一般情况下，组件的render函数返回的元素会被挂载在它的父级组件上：import DemoComponent from '....在 React中组件是一个函数或一个类，它可以接受输入并返回一个元素。注意：工作中，为了提高开发效率，通常使用JSX语法表示 React元素（虚拟DOM）。

2.7K3 0

自写JQ控件-树状菜单控件

).parent("li").click(); return false; }); /* 菜单项接受单击 */ this.find("li".../* * 如果当前节点下面包含子菜单，并且其 show 属性的值为 true，则修改其 show 属性为 false * 否则修改其 show 属性为 true */ if...样式可能会比较好理解一些，就是一些初始背景颜色、鼠标放过去的样式、被选中的样式、缩进、子菜单字体等等。所以不多介绍了。主要js可能需要解释一下。...在XBGMenuTree.js有大量使用到，理解其含义，自然可以理解到其精妙之处。虽然this随着函数使用场合的不同，this的值会发生变化。...（1）比如一些位置的知识： jquery获取元素位置的方法有两个： position方法：获取匹配元素集中第一个元素的坐标，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

1.9K3 0

【Java Web_09】JQuery

CRUD ① append():父元素将子元素追加到末尾 * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾 ② prepend():父元素将子元素追加到开头...linear" - swing：动画执行时效果是先慢，中间快，最后又慢 - linear：动画执行时速度是匀速的 * fn：在动画完成时执行的函数...- element：就是集合中的每一个元素对象 - this：集合中的每一个元素对象 * 回调函数返回值 - true:如果当前function...返回为false，则结束循环(break)。...- false:如果当前function返回为true，则结束本次循环，继续下次循环(continue) ③ $.each(object, [callback]) ④ for..of 【query

1.5K1 0

jQuery (二)

使用jQuery处理事件事件处理一个栗子，单击p时背景变成灰色由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html js // 单击任意p时，使其背景变成灰色 $('p').click(function () { $(this).css('background-color',...，由于是异步的，先返回false，再执行动画，false的意思为通知click事件不能进入队列中，进行等待。...，而不是单一函数时，将会传入函数数组来替换当前队列。...false cache 添加时间戳，防止浏览器缓存回调 context 指定回调函数时的上下文对象，即this beforeSend 指定发送ajax请求指定激活的函数 success 指定ajax请求成功后的回调函数

9.3K3 0

浅学前端：JavaScript篇(一）

a + b; })(1,2)第二种场景：作为其它对象的方法，例如页面有元素点我啊此元素有一个 onclick 方法，会在鼠标单击这个元素后被执行，onclick 方法刚开始是.../ 箭头函数 arr.map( i => i * 10 ); // 箭头函数传给 map 的函数，参数代表旧元素，返回值代表新元素map 的内部实现（伪代码） function map(a) { //...(son.f1); // 打印父属性 son.m1(); // 打印父方法father 是父对象，son 去调用 .m1 或 .f1 时，自身对象没有，就到父对象找son...js 又提供了一种基于函数的原型继承函数职责负责创建子对象，给子对象提供属性、方法，功能上相当于构造方法函数有个特殊的属性 prototype，它就是函数创建的子对象的父对象注意！...")子对象的 __proto__ 就是函数的 prototype 属性JSON之前我们讲 http 请求格式时，讲过 json 这种数据格式，它的语法看起来与 js 对象非常相似，例如：一个 json

2303 0

JQuery高级

1.正则在js的使用方法列一个变量，存储正则规则，用这个变量去test某个数据-----匹配True和不匹配False var re = new RegExp(规则，正则表达式的参数) g全文搜索...***事件冒泡现象：父子级标签触发子级的事件，这个事件会逐层向父级传递。子集执行了某一事件，会逐层向上触发相同事件，直到被处理或者遇到return。...比如子级有单击事件，那么父级如果有单击事件也会被触发，父级的父级如果有单击事件也会被触发。任何一个操作，计算机或者浏览器都会去处理。不管你有没有设置对应的事件。...（父：最近的能包含住将来发生事件的所有子级）------ 事件代理 .delegate(真实发生事件的目标，字符串事件属性，匿名函数去写命令function(){}) 工作中有可能会有人用这个词on()...***js对象（ajax要用调用属性和函数的语法） js的对象就是python中的字典。

1.5K5 0

100个最常问的JavaScript面试问答-第2部分（共10部分）

在“冒泡阶段”中，事件冒泡或向上传播至父级，祖父级，祖父的父级，直到到达窗口为止；而在“捕获阶段”中，事件从窗口开始向下直到触发元素事件或event.target。此过程称为事件传播。...如果单击子元素，它将child, parent, grandparent, html, document 和window分别记录在控制台上。这整个事件是事件冒泡。问题16.什么是事件捕获？...如果单击子元素，它将window, document, html, grandparent, parent和child分别记录在控制台上。...答：每当从某个内部范围内访问在当前范围之外定义的变量时，都会创建Closures。它使我们能够从内部函数访问外部函数的范围。...换句话说，闭包是与函数相关的本地声明的变量，并在相关函数返回时保留在内存中。闭包包含创建闭包时在范围内的所有局部变量。在JavaScript中，每次创建函数时都会创建闭包。

1.1K3 1

JS快速入门（二）

(id)，id 为 setTimeout()的返回值示例格式：var t=setTimeout("JS语句",毫秒) setInterval("JS语句",时间间隔) // 在指定时间之后执行一次相应函数...HTML 内容（文本和标签），类型为字符串 innerText 和innerHTML类似，但是只返回文本 children 返回指定元素的子元素节点集合 parentNode 返回指定节点的父节点 firstElementChild...返回指定元素的第一个子元素节点 lastElementChild 返回指定元素的最后一个子元素节点 innerHTML和innerText示例 document.querySelector('.box...(child) 删除选定的子节点，需要指定父元素 // html 结构如下：元素1 元素2 // 删除 div...box1，返回 false box.classList.toggle('active') // [box2] => [box2, active] 节点写入当我们需要更改一个标签的文字或内容时

6.6K3 0

浅析 JavaScript 中的事件委托

如果缺少 captureOrOptions 参数，或者参数为 false 或 {capture：false}，那么侦听器将捕获**目标（target）和冒泡阶段（bubble phases）**的事件...该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。 3.事件委托让我们用事件委托来捕获多个按钮上的点击：。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。...使用事件委托需要 3 个步骤：步骤 1：确定要监视事件的元素的父级元素在上面的例子中，是按钮的父元素。...该事件侦听器也会对按钮单击做出反应，因为按钮单击事件冒泡通过祖先元素（由于事件传播）。步骤 3：用 event.target 选择目标元素单击按钮时，将会用event 对象参数调用处理函数。

2.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭