点击事件问题：单击事件时无父母子元素：无

Question

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

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：前。我使用点击事件：自动;在上面。我不确定是否应该使用AUTO或ALL。然后我使用点击事件：无;在.slide类上，它是它下面的红色矩形。所以现在，我不能点击红色的矩形只是白色的三角形，使它上下滑动。但我仍然想点击红色矩形的一部分来做其他事情（不一定滑动）。所以我在矩形+三角形的div内添加了一个跨度（绿色的Hello）。然后我写JS代码，这样如果点击绿色的Hello，一个div就会被添加到HTML的主体中。但它不起作用。

我学会了这个跨度方法here，但我不太明白。

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的情况下完成。改为使用sibling selectors，标签和复选框。 See working demo here