首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

代码语言:txt
复制
<!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的状态,并根据这个状态来执行相应的函数。

参考链接:

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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

事件高级

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

1.4K20

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

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

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

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

    2K10

    分享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滚动到一个元素。

    15420

    社招前端二面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 更新后还在,所以可以复用该节点,只需要交换顺序。

    2K60

    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、

    26750

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

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

    2.7K10

    事件高级

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

    1.5K41

    JS事件流

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

    5.8K10

    JavaScript事件

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

    2K60

    5、React组件事件详解

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

    3.7K10

    Jquery入门基础教程免费版

    Click事件 3.1 jQuery基础事件 3.1.1 鼠标事件 方法 描述 执行时机 click( ) 触发或将函数绑定到指定元素的click事件 单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的...mouseover事件 鼠标指针移过时 mouseout( ) 触发或将函数绑定到指定元素的mouseout事件 鼠标指针移出时 3.1.2 键盘事件 当我们在键盘尚进行按键操作的时候,做出的响应事件...方法 描述 执行时机 keydown( ) 触发或将函数绑定到指定元素的keydown事件 按下键盘时 keyup( ) 触发或将函数绑定到指定元素的keyup事件 释放按键时 keypress( )...这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。 <!...4.2 追加节点 语法 功能 append(content) $(A).append(B)表示将子元素B追加到A中 prepend(content) $(A). prepend (B)表示将子元素B前置插入到

    10210

    「Web编程API」- 03

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

    1.4K50

    事件高级

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

    1.2K10

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

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

    1.8K30

    前端成神之路-WebAPIs03

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

    3K20

    react面试题详解

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

    1.3K10

    看完这几道 JavaScript 面试题,让你与考官对答如流(上)

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

    2K10
    领券