點擊事件問題：單擊事件時無父母子元素：無

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