单击父元素时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，阻止事件冒泡到父元素，从而不会触发父元素的点击事件。
这种技术可以用于处理特定的交互需求，例如在某些情况下需要单击子元素时不触发父元素的点击事件。
相关·内容
2回答
单击父元素时JS函数，单击子元素时返回false
javascript
我在我的网站上有一个图片库，当你点击它时，它会打开成一种灯箱效果。 我希望他们能够在lightbox背景上关闭预览图像，并关闭预览，但如果他们单击实际的预览图像本身，则不能。preview_image"); new_image.setAttribute("onclick", "return false但是，预览是这个的子项，我希望他们能够在不结束预览的情况下单击图像
浏览 13提问于2019-06-27得票数 0
回答已采纳
2回答
父元素的哪个子编号是子元素-这是一个属性吗？
javascript、parent-child
三个div：
函数whatAmI(源){//此函数告诉您子元素//嵌套在父元素whatAmI if(source.parentElement.childrenx==source){返回警报(“I am child #”+ x)；}whatAmI=document.getElementById(‘
浏览 8提问于2013-05-21得票数 3
回答已采纳
2回答
委托不处理动态添加的元素
jquery
new">yyy</li></ul>');<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.jsid='old'>old</li> </li><button
浏览 0提问于2015-01-20得票数 0
回答已采纳
2回答
e.stopPropogation()等效于点击事件的捕获阶段？
javascript、jquery
我在JS中寻找一种方法来阻止单击事件在单击父元素时从DOM继续到嵌套的子元素(捕获阶段)。是否存在用于此的原生JS函数？编辑03/10
在函数调用中编辑03/11 Typo -它是stopPropagation()，而不是stopPropogation()。感谢@杰
浏览 3提问于2015-03-11得票数 0
1回答
具有一个Active / Toggle事件，该事件在单击时忽略具有相同CSS类的同级元素
javascript、events、dom-events、this
我在页面上有一些元素，所以当我单击其中一个元素时，一个特定的子元素被移除，当该元素被重新单击时，子元素再次返回。我通常会使用一个click事件来完成这个任务，它添加了一个'.active‘CSS类，这个类可以根据变量当前使用if/else语句显示为true还是false来添加和删除。这一次的问题是，我有多个元素，我不能真正使用
浏览 4提问于2021-03-24得票数 0
回答已采纳
3回答
如何处理元素中的鼠标事件，但不处理其一个子元素？
javascript、jquery
我希望在父元素上以一种方式处理mousedown事件，但如果该事件发生在父元素的子元素上，则处理方式不同。这是： //stuff如果单击了.parent中的任何元素，就会触发该函数，但只有当父元素是被单击的唯一元素</e
浏览 6提问于2015-04-01得票数 3
回答已采纳
4回答
在我的.click回调中触发单击事件会导致“最大调用堆栈大小超出”
javascript、jquery、html、twitter-bootstrap
但在打开模型之前，我需要更改一些变量，因此我触发了一个单击事件，该事件在隐藏按钮上打开引导模式。<span class="hidden" id="open-modal" data-toggle="modal" data-target="#popup-modal"></span>而js
浏览 7提问于2016-09-16得票数 5
回答已采纳
1回答
返回未定义的引导带数据报警器的Jquery .closest()
javascript、bootstrap-datepicker
我正在使用，我试图关闭弹出窗口时，有一个点击之外的模式。我遇到的问题是，当我使用<td>时，单击表$(e.target).closest('.datepicker')元素时不会返回父div in。如果单击它周围的蓝色框(也是一个子元素)，它将返回父div，但不返回表中单击的内容。JS
$(
浏览 3提问于2015-02-14得票数 2
3回答
停止事件侦听器向Vue中的子元素列表
vue.js
我正在Vue中创建一个模态，我想在用户单击内部模式容器外部时关闭它。问题是，当我在单击父元素时添加事件侦听器时，所有子元素在单击时也会触发该事件侦听器。el: '#mo
浏览 0提问于2018-03-26得票数 0
回答已采纳
1回答
如何切换多个列表元素的className？
javascript、reactjs、react-hooks
我有一个名为NavMain.js的父组件和一个名为NavEventDate.js的子组件。我使用道具将一些数据从父组件传递给子组件。在呈现子组件时，我只希望第一个<li>元素具有className="selected"，然后单击其他<li>元素，只希望单击其中一个元素具有className="selected"，而其他
浏览 5提问于2020-11-22得票数 0
回答已采纳
1回答
将数据参数从父级传递到子级
javascript、jquery、html
我试图为div元素实现一个onClick处理程序。父div具有数据参数，而子div没有任何数据参数。当我单击时，子div正在调用onlick处理程序，但是没有数据参数。如果单击父元素，就可以找到数据参数。我的问题是，如果onclick操作可以传递给子元素，那么如何对数据元素执行同样的操作呢？当我单击日志的父元素时</em
浏览 0提问于2018-04-15得票数 1
回答已采纳
7回答
反应-防止家长从孩子身上触发事件
javascript、css、reactjs、events、dom-events
我有这样的场景，当单击父元素时，它会翻转以显示具有不同颜色的子元素。不幸的是，当用户单击其中一种颜色时，父颜色上的“单击”事件也会被触发。
当单击子对象时，如何停止父级事件触发器？单击子对象时，将pointer-events : none类追加到父类。但是，这意味着父
浏览 4提问于2016-06-01得票数 113
回答已采纳
1回答
当单击子元素时，响应获取父元素的状态/数据
javascript、reactjs、redux、traversal
我有一个父元素li的构造，它包含一个链接，还有一个字体很棒的i。单击i时，需要将父级的标题(从redux状态)传递给函数。
我是否需要遍历DOM树才能得到它？单击子元素时，如何访问父元素的状态？this.props.bases.map(基=> ( {base.title} <i className="fas fa-倍“onClick={title =>
浏览 0提问于2018-08-13得票数 0
回答已采纳
2回答
防止嵌套元素触发父元素的事件
javascript、html、jquery、dom、jquery-events
click) -> .child (has nothing) <div class="child">Child</div>父元素的样式设置为隐藏溢出内容，并在单击时切换其高度。当用户单击时，父元素将展开以显示子元素。我希望用户能
浏览 1提问于2013-08-24得票数 12
回答已采纳
5回答
如何告诉jquery选择一个父元素，而不是它的子元素？
javascript、jquery
我正在一个元素上使用下面的点击函数： $('div#extras').show();现在，每当我单击其中一个按钮时，父div和子div都会消失。
如何使单击函数仅在父级被单击时触发，而不是在其所有子级被单击时</
浏览 0提问于2010-08-17得票数 0
回答已采纳
1回答
使父元素可点击使所有子元素也可点击吗？
android、onclick、clickable、android-linearlayout
有一个包含许多子元素的LinearLayout。当用户接触任何这些子元素时，都会调用相同的方法。为了不对每个元素实现相同的onClickListener，我为父LinearLayout 只实现了。现在，当我单击父布局边界内的任何位置时，就会像为所有子元素实现监听器一样调用所需的方法。问:我是否可以相信，每当我为父程序实现onClickListener时，它的所有<
浏览 3提问于2011-11-15得票数 21
回答已采纳
3回答
如何添加:悬停并同时单击“事件到元素”？
javascript、css、pseudo-class、dom-events
当我悬停父元素时，会出现他的子元素。当我单击父元素时，他的子元素也会出现，当我再次单击它时，其子元素将消失。但是，当我悬停父元素时(单击父元素以表示消失的子元素)，它的子</em
浏览 2提问于2018-08-31得票数 0
回答已采纳
1回答
当父元素使用JQuery时，子元素触发器的document.delegate事件处理程序
html、jquery、jquery-events、event-bubbling、jquery-delegate
我使用$(document).delegate为子元素添加了事件处理程序，对于父元素和超级元素，我使用了HTML属性来处理单击事件。通常，当单击子元素时，事件应该在子元素和父元素之间冒泡。因为我使用委托在子元素中添加事件。当我单击子元素时，
浏览 2提问于2021-03-17得票数 0
1回答
单击子元素触发的React onClick事件
javascript、reactjs、mouseevent
当我单击具有onClick属性的父元素时，也会在单击没有onClick属性的子元素时触发该事件。</div> }当我单击父元素时，子元素</
浏览 26提问于2020-02-11得票数 0
2回答
我想在单击父元素时将类添加到父元素的子元素中。. $(this).children().addClass('newClass');但是，我不想在单击子元素本身时将'newClass‘添加到子元素中……这有可能吗？
浏览 0提问于2015-03-27得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
