开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我单击子div时，如何关闭父div函数，当我再次单击父div时，该函数将处于活动状态

要实现这个功能，你可以使用JavaScript来监听点击事件，并根据点击的目标元素来决定是否关闭或激活父div的函数。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Parent Div</title>
<style>
  .parent {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .child {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="parent" id="parentDiv">
  <div class="child" id="childDiv"></div>
</div>

<script>
  // 获取父div和子div的DOM元素
  const parentDiv = document.getElementById('parentDiv');
  const childDiv = document.getElementById('childDiv');

  // 定义一个变量来跟踪父div的状态
  let isParentActive = true;

  // 为父div和子div添加点击事件监听器
  parentDiv.addEventListener('click', function(event) {
    // 阻止事件冒泡到子div
    event.stopPropagation();
    // 切换父div的状态
    isParentActive = !isParentActive;
    console.log('Parent Div Status:', isParentActive ? 'Active' : 'Inactive');
    // 根据状态执行相应的函数
    if (isParentActive) {
      activateParentDiv();
    } else {
      deactivateParentDiv();
    }
  });

  childDiv.addEventListener('click', function(event) {
    // 阻止事件冒泡到父div
    event.stopPropagation();
    // 关闭父div的函数
    isParentActive = false;
    console.log('Parent Div Status:', isParentActive ? 'Active' : 'Inactive');
    deactivateParentDiv();
  });

  // 定义父div激活时的函数
  function activateParentDiv() {
    parentDiv.style.backgroundColor = 'lightgreen';
    // 这里可以添加更多的激活逻辑
  }

  // 定义父div关闭时的函数
  function deactivateParentDiv() {
    parentDiv.style.backgroundColor = 'lightblue';
    // 这里可以添加更多的关闭逻辑
  }
</script>

</body>
</html>

在这个示例中，我们有两个div元素，一个父div和一个子div。我们为这两个元素都添加了点击事件监听器。当点击子div时，会调用deactivateParentDiv函数来关闭父div的功能。当点击父div时，会根据当前的状态来决定是激活还是关闭父div的功能。

关键点在于使用event.stopPropagation()来阻止事件冒泡，这样点击子div时不会触发父div的点击事件。同时，我们使用了一个变量isParentActive来跟踪父div的状态，并根据这个状态来执行相应的函数。

参考链接：

MDN Web Docs: Event.stopPropagation()

这个方法可以扩展到更复杂的场景，只需要根据实际需求调整事件处理逻辑和状态管理即可。

相关搜索:如何使用jQuery在父div中单击时将子div的大小调整为单击点或区域？如何在单击时突出显示div或使div处于活动状态如何才能仅当使用事件气泡单击子div时才触发函数？当子选择处于悬停、活动和聚焦状态时，更改父div的边框颜色当我有其他向左浮动的现有div块时，我如何将一个右浮动的div块定位在它的父元素的顶部？当所有输入共享相同的父div时，如何在单击时切换单选输入元素的检查状态？console命令成员变量的使用问题 css元素水平居中初学javaweb

相关搜索:

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

有帮助

没帮助

相关·内容

事件高级

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...当我们注册事件时，event 对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数) ....常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象

1.4K2 0

5个让你提高工作效率的 VueUse 库函数

– 提供反应时间格式化功能传感器（Sensors ）—用于监听不同的 DOM 事件、输入事件和网络事件状态（State ）—管理用户状态（全局、本地存储、会话存储）实用程序（Utility）—不同的实用程序函数...当我们输入时，每个字符都会触发历史数组中的一个新条目，如果我们单击撤消/重做，我们将转到相应的条目。还有不同的选项可以为此功能添加更多功能。...但是，如果他们确实在模态之外单击，我们希望它关闭。...每当我们更改对象的值时，useVModel 都会向父组件发出更新事件。这是父组件可能是什么样子的一个快速示例.........默认情况下，IntersectionObserver 将使用文档的视口作为根，阈值为 0.1——因此当在任一方向超过该阈值时，我们的交叉观察者将触发。

1.8K1 0

5个让你提高工作效率的 VueUse 库函数

– 提供反应时间格式化功能传感器（Sensors ）—用于监听不同的 DOM 事件、输入事件和网络事件状态（State ）—管理用户状态（全局、本地存储、会话存储）实用程序（Utility）—不同的实用程序函数...当我们输入时，每个字符都会触发历史数组中的一个新条目，如果我们单击撤消/重做，我们将转到相应的条目。还有不同的选项可以为此功能添加更多功能。...但是，如果他们确实在模态之外单击，我们希望它关闭。...每当我们更改对象的值时，useVModel 都会向父组件发出更新事件。这是父组件可能是什么样子的一个快速示例.........默认情况下，IntersectionObserver 将使用文档的视口作为根，阈值为 0.1——因此当在任一方向超过该阈值时，我们的交叉观察者将触发。

1.9K1 0

分享5个关于 Vue 的小知识，希望对你有所帮助（二）

现在，当我们在文本输入中键入时，p watcher应该运行并记录newValue.age值。 2、如何在Vue.js的组件中调用全局自定义函数？...，该箭头函数调用this.show为true。...我们必须使用箭头函数才能在回调函数中获得正确的this值。这个this应该是组件实例，因为箭头函数不绑定它们的this值。我们将setShow设置为@click指令的值，以便在单击按钮时运行它。...因此，当我们单击它时，div会显示，因为show变为true。 4、如何防止点击按钮时，点击事件冒泡到父级元素？...当我们点击每个div或span元素时，将会运行showAlert方法。 5、使用Vue.js滚动到一个元素有时候，我们需要使用Vue.js滚动到一个元素。

1482 0

社招前端二面react面试题集锦

在组件尚未挂载之前，Ajax请求将无法执行完毕，如果此时发出请求，将意味着在组件挂载之前更新状态（如执行 setState），这通常是不起作用的。...在使用 Genymotion时，首先需要在SDK的 platform-tools中加入环境变量，然后在 Genymotion中单击 Setting，选择ADB选项卡，单击 Use custom Android...通过在 shouldComponentUpdate方法中返回 false, React将让当前组件及其所有子组件保持与当前组件状态相同。...（1）在map等方法的回调函数中，要绑定作用域this（通过bind方法）。（2）父组件传递给子组件方法的作用域是父组件实例化对象，无法改变。...但是当我们用 key 指明了节点前后对应关系后，React 知道 key === "ka" 的 p 更新后还在，所以可以复用该节点，只需要交换顺序。

2K6 0

ReactPortals传送门

ReactPortals传送门 React Portals提供了一种将子节点渲染到父组件以外的DOM节点的解决方案，即允许将JSX作为children渲染至DOM的不同部分，最常见用例是子组件需要从视觉上脱离父容器...事件将被触发，而当我们再将鼠标移动到b元素时，不会再次触发MouseEnter事件。...事件将被触发，而当我们再将鼠标移动到b元素时，由于冒泡会再次触发绑定在a元素上的MouseOver事件，再从b元素移出到a元素时会再次触发MouseOver事件。...事件也是同样会多次触发，可以将父元素与所有子元素都看作独立区域，而事件会冒泡到父元素来执行事件绑定函数，这可能导致重复的事件处理和不必要的逻辑触发，而MouseEnter和MouseLeave事件不会重复触发...a上时，会执行a元素绑定的事件，当依次将鼠标移动到a、b、c的时候，同样会以此执行a、b、c的事件绑定函数，并且不会因为冒泡事件导致父元素事件的触发，当我们鼠标直接移动到c的时候，可以看到依旧是按照a、

2305 0

React.memo() 和 useMemo() 的用法与区别

想象一下，有一个组件显示数以千计的数据，每次用户单击一个按钮时，该组件或树中的每条数据都会在不需要更新时重新渲染。...> ); } export default React.memo(Counts); 现在，当我们通过单击选择奶酪类型时，我们的组件将不会重新渲染。...接下来，我们声明一个 times 状态，稍后我们将更新该状态来触发/强制重新渲染。之后，我们声明一个 memoizedValue 变量，用于存储 useMemo() Hook 的返回值。...> ); } export default UseMemoCounts; 现在，当我们单击任何奶酪按钮时，我们的 memoizedValue 不会更新。...但是当我们单击 Force render 按钮时，我们看到 memoizedValue 更新并且组件重新渲染。

2.6K1 0

事件高级

eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...该方法接收三个参数: ●type:事件类型字符串，比如click、 mouseover，注意这里不要带on ●listener: 事件处理函数，事件发生时，会调用该监听函数 useCapture:可选参数...eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象

1.5K4 1

JS事件流

爷爷在此我是父元素 <span id...中所述案例，则单击 div 元素后，事件触发顺序如下： document html body div 也就是在事件捕获过程中，document 对象首先接收到 click 事件，然后事件沿 DOM 树向下依次传播...还以上述代码为例，单击 div 元素后的触发顺序则是： ?...下一阶段是处于目标阶段，于是事件在 div 上发生，并在事件处理中被看成冒泡的一部分。最后，冒泡阶段发生，事件传播回文档。回顾问题开篇提出的问题，仿佛在此可以得出结论： ?...输出结果可是，当我们将子级的冒泡和捕获在js中位置调换后，输出的则是……子级先冒泡，再捕获！如下： ? 输出结果2 这是什么原因呢？？下期——事件处理顺序，进一步揭晓。

5.8K1 0

JavaScript事件

事件类型（１）单击事件onClick 　　当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。...例：（２）onChange改变事件　　当利用text或texturea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。...（４）获得焦点事件onFocus 　　当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。...（７）卸载文件onUnload 　　当Web页面退出时引发onUnload事件，并可更新Cookie的状态。 ? 事件流事件流：描述的是从页面中接收事件的顺序。...id="tg"> 理解事件的基本概念如果单击了p标签，那么，如果是事件冒泡流的事件流机制，则click事件将按照如下顺序进行执行

2K6 0

VueUse中的这5个函数，也太好用了吧

并在单击相应按钮时调用 undo 和redo函数。...padding: 20px; width: 30%; background: #fff; } </style 结果是这样的，我们可以用我们的按钮打开弹出窗口，然后在弹出内容窗口外单击关闭它...而每当改变对象的值时，useVModel 会向父组件发出一个更新事件。...CustomInput, }, setup () { const data = ref('hello') return { data } } } 运行结果如下，父方的值总是与子方的输入保持同步...使用位置或颜色时，这非常有用。使用颜色的一个很好的技巧是使用计算的属性将RGB值格式化为正确的颜色语法。

3.5K3 0

5、React组件事件详解

；当某个事件触发时，React根据这个内部映射表将事件分派给指定的事件处理函数；当映射表中没有事件处理函数时，React不做任何操作；当一个组件安装或者卸载时，相应的事件处理函数会自动被添加到事件监听器的内部映射表中或从表中删除...react事件 React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行..." onClick={this.onReactChildClick}>子元素单击事件触发 ) } } export default...ReactEvent 通过设置原生事件绑定为冒泡阶段调用，且每次测试单击子元素按钮：在子元素原生事件程序中阻止事件传播，则打印出：子元素原生事件绑定事件触发；在父元素元素事件程序中阻止事件传播...父组件React合成事件绑定事件触发可以看到若不阻止事件传播每次（单击子元素）事件触发流程是： Document->子元素（原生事件触发）->父元素（原生事件）->回到Document->React

3.7K1 0

事件高级

eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...该方法接收三个参数：  type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on  listener：事件处理函数，事件发生时，会调用该监听函数  useCapture...eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。...该方法接收两个参数：  eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on  callback：事件处理函数，当目标触发事件时回调函数被调用...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象

1.2K1 0

「Web编程API」- 03

eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。...attacheEvent()事件监听（IE678支持） eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象

1.4K5 0

在10分钟内概览Svelte 3的基础知识

（例如npm build时或者是yarn build时）本文将通过以下TODO的项目示例来让大家更加直观的了解这个框架：项目的功能概览 1.当没有待办事项时，该应用会向我显示一个占位符 2.当我单击添加没有值的待办事项时...3.当我单击以添加带有值的待办事项时，应用程序将添加一个待办事项并重置该值。...如果你用过react或vue，则就像React中用来给ReactDOM进行渲染或者使用Vue中的el:'body' 来绑定该元素 props 有某些组件可以从它的父级接受一些数据或者是属性...props与子级props状态公用一个名字时的简写 bind:shouldSleep={sleepy} 我们可以在子组件中更改此值 bing:happy 变为bind:happy={happy}。...提供完这些东西以后，当我们在组件内部访问它们时，我们的props 将保持上面给出的值。

1.8K3 0

react面试题详解

使用状态要注意哪些事情？要注意以下几点。不要直接更新状态状态更新可能是异步的状态更新要合并。数据从上向下流动如果创建了类似于下面的 Icketang元素，那么该如何实现 Icketang类？...Icketang组件的子组件是一个函数，而不是一个常用的组件。这意味着在实现 Icketang组件时，需要将props. children作为一个函数来处理。具体实现如下。...这种模式的好处是，我们已经将父组件与子组件分离了，父组件管理状态。父组件的使用者可以决定父组件以何种形式渲染子组件。...，当父组件的user状态数据发生改变时，我们发现Info组件可以成功地渲染出来。...当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。

1.3K1 0

前端成神之路-WebAPIs03

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。 ?...eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。 ?...DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？ ?...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象

2.9K2 0

JQuery事件处理

//单击显示，再次点击隐藏 /*$(function(){ $(“a”).bind(‘click’,function(){ if...使用addClass(),再次单击就用removeClass去掉就可以 },function(){ $(this).next().hide(); }) }); 3、事件冒泡示例代码...博客 //比如一个父元素绑定了一个事件，而父元素内部后代元素又绑定了一个事件，这样后代元素事件响应的时候父元素事件响应不响应呢？...(){ alert(“子元素事件被激活”); }); });*/ //单击b包含的内容会激活两个事件，这样怎么才能解决？...style=”display:none;”>多个事件隐藏 //很多事件都是有用户单击或者鼠标划过来触发的，可是刚打开的页面我们有没有办法直接触发呢

2.8K5 0

优化 React APP 的 10 种方法

每当我们键入任何内容时，我们的应用程序组件都会重新渲染，从而导致该expFunc函数被调用。我们将看到，如果连续输入，该函数将被调用，从而导致巨大的性能瓶颈。对于每个输入，渲染将花费3分钟。...传递了箭头函数声明，因此，每当呈现App时，总是使用新的引用（内存地址指针）创建新的函数声明。因此，React.memo的浅表比较将记录差异，并为重新渲染提供批准。现在，我们如何解决这个问题？...，因此当我们反复单击Set Count按钮TestComp时不会重新渲染。...这些组件树使其具有父子关系，即在组件中更新绑定数据时，将重新呈现该组件及其子组件，以使更改传播到整个子组件树中。...如果再次单击该按钮，我们将有另一个重新渲染，不是这样，因为前一个状态对象和下一个状态对象将具有相同的data值，但是由于setState新状态对象的创建，React将看到差异状态对象引用和触发器重新呈现

33.9K2 0

看完这几道 JavaScript 面试题，让你与考官对答如流（上）

clickFunc(event) { console.log(event.currentTarget); } 如果单击 button，即使我们单击该 button，它也会打印最外面的div标签。...闭包就是一个函数在声明时能够记住当前作用域、父函数作用域、及父函数作用域上的变量和参数的引用，直至通过作用域链上全局作用域，基本上闭包是在声明函数时创建的作用域。...现在，当我们调用引用了innerFunc的x变量时，innerParam将具有一个inner值，因为这是我们在调用中传递的值，而globalVar变量值为guess，因为在调用x变量之前，我们将一个新值分配给...var关键字创建一个全局变量，当我们 push 一个函数时，这里返回的全局变量i。...因此，当我们在循环后在该数组中调用其中一个函数时，它会打印5，因为我们得到i的当前值为5，我们可以访问它，因为它是全局变量。因为闭包在创建变量时会保留该变量的引用而不是其值。

2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭