Issue with click-event:auto on child element of parent with click-event:none

Question

I limited click event to :after pseudo-element using click-event:auto and created a span to bind an event inside the parent element. Why the span does not work?

 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> 

The white triangle is .slide:before. I use click-event:auto; on it. I am NOT sure if I should use AUTO or ALL. Then I use click-event: none; on .slide class, which is the red rectangle below it. So now, I cannot click on the red rectangle just the white triangle to make it slide up and down. But I do still want to click on part of the red rectangle to do other things(not sliding necessarily).So I added a span(green Hello) inside the div that is the rectangle+the triangle. I then write the JS code so that if the green Hello is clicked, a div will Hello will be added to the body of the HTML. But it does NOT work.

I learned this span method here , but I dont quite understand it.

Answer 1

A few things:

• Avoid events on pseudo-elements
• Don't add elements by reassigning the entire body innerHtml - you lose all event bindings on all elements
• Try to avoid putting JavaScript in your 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> 

Even better:

This effect can be done completely without JavaScript. Use sibling selectors , a label, and a checkbox instead. See working demo here