单击事件的问题：自动将父级的子元素与单击事件：无

Question

我使用click-event:auto click事件限制为:after伪元素，并创建了一个span来将事件绑定到父元素内。 为什么跨度不起作用？

 function toggle(){ var button=document.querySelector('.toggle'); var bar=document.querySelector('.slide'); if(bar.className==='slide up'){ bar.className='slide down'; }else{ bar.className='slide up'; } } function click(){ document.body.innerHTML+='<div>Hello</div>'; } 

 span{ position:relative; top:90px; background:green; cursor:pointer; pointer-event:auto; } *{ margin:0px; padding:0px; height:100%; width:100%; } .box{ overflow:hidden; background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg'); background-size: cover; background-position:center; } .slide{ position: relative; left:39vw; width: 55vw; height: 77vh; background: red; pointer-events:none; } .slide:before { pointer-events:auto; cursor:pointer; content: ''; position:absolute; top:-3vh; width: 0px; height: 0px; border-left:27.5vw solid transparent; border-right:27.5vw solid transparent; border-bottom:3vh solid white; } .slide.down{ transform:translateY(100vh); } .slide.up{ transform:translateY(23vh); } .slide.up:before{ transform:translateY(3vh) rotateX(180deg); } .slide{ transition:transform 0.4s ease-out; } 

 <div class='box'> <div class='slide up' onclick='toggle()'><span onclick='click()'>Hello</span></div> </div> 

白色三角形是.slide：之前的。 我使用click-event：auto; 在上面。 我不确定应该使用AUTO还是ALL。 然后，我使用点击事件：无； 在.slide类上，这是它下面的红色矩形。 所以现在，我不能单击红色矩形，而只能单击白色三角形以使其上下滑动。 但是我还是想点击红色矩形的一部分来做其他事情（不一定要滑动），因此我在div内添加了一个span（绿色Hello），即矩形+三角形。 然后，我编写JS代码，以便在单击绿色的Hello时将div将Hello添加到HTML的正文中。 但这不起作用。

我在这里学习了这种span方法，但是我不太了解。

Answer 1

一些东西：

• 避免伪元素上的事件
• 不要通过重新分配整个主体innerHtml来添加元素-您会丢失所有元素上的所有事件绑定
• 尽量避免将JavaScript放入HTML中

 //listen for click event on toggle element document.querySelector(".toggler").addEventListener("click", function(){ this.parentElement.classList.toggle("up"); }); //listen for click event on hello document.querySelector(".clicker").addEventListener("click", function(){ var div = document.createElement("div"); var text = document.createTextNode("Hello"); div.appendChild(text); document.body.appendChild(div); }); 

 html, body{ height:100%; } *{ margin:0px; padding:0px; } .clicker{ position:relative; top:90px; background:green; cursor:pointer; } .box{ overflow:hidden; background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg'); background-size: cover; background-position:center; height:100%; width:100%; } .slide{ position: relative; left:39vw; width: 55vw; height: 77vh; background: red; transform:translateY(100vh); transition:transform 0.4s ease-out; } .slide.up{ transform:translateY(23vh); } .toggler { cursor:pointer; content: ''; position:absolute; top:-3vh; width: 0px; height: 0px; border-left:27.5vw solid transparent; border-right:27.5vw solid transparent; border-bottom:3vh solid white; } .slide.up .toggler{ transform:translateY(3vh) rotateX(180deg); } 

 <div class='box'> <div class='slide up'> <span class='toggler'></span> <span class='clicker'>Hello</span> </div> </div> 

更好的是：

无需JavaScript即可完全实现这种效果。 请使用同级选择器 ，标签和复选框。 在这里查看工作演示