Question

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

＆＃13;

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>';
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

我学会了这种span方法here，但我不太明白。

Answer 1

一些事情：

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

＆＃13;

//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);
});

＆＃13;

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);
}

＆＃13;

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

＆＃13;

更好：

这种效果可以在没有JavaScript的情况下完成。请改用sibling selectors，标签和复选框。 See working demo here

click-event的问题：使用click-event：none在父元素的子元素上自动运行

1 个答案: