javascript - Safari 点击事件和激活状态不能共存

Question

我尝试创建一个三态按钮:

1. 关闭(默认)
2. 开启(悬停/滚动)
3. 向下(主动/点击)

在 Safari 桌面版和 Safari 移动版中，当添加按下状态时(通过 :active 伪状态)它会终止点击事件。

为什么这两个部分不能很好地结合在一起？

在此处演示的简单示例: https://jsfiddle.net/m7hev81t/1/

$('button').on('click',function(e){
	$('#log').html('clicked ' + new Date().getTime());
});

button {
  position:relative;
  background:transparent;
  border:none;
  height:50px;
  width:200px;
  cursor:pointer;
}

button .state { 
  position:absolute;
  width:100%;
  height:100%;
  display:none;
  top:0; left:0;
}

.state.off { background:green; display:block; }
.state.on { background:orange;}
.state.down { background:red; }

button:hover .state.off, button:hover .state.down {display:none;}
button:hover .state.on {display:block;}

button.has-down:active .state.on, button.has-down:active .state.off {display:none;}
button.has-down:active .state.down {display:block;}

#log {
  width:100%;
  border:1px solid grey;
  min-height:2em;
  margin-top:2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>
No down/click state.
</p>
<button>
<div class="state off">
off
</div>
<div class="state on">
on
</div>
<div class="state down">
down
</div>
</button>

<p>
Down/click state.
</p>
<button class="has-down">
<div class="state off">
off
</div>
<div class="state on">
on
</div>
<div class="state down">
down
</div>
</button>

<div id="log"/>

Answer 1

我认为问题在于状态本身正在捕捉点击事件。然后当状态隐藏时，点击不会冒泡。

添加这行 CSS 使其工作:

button.has-down .state { pointer-events:none; }

这是 fiddle :https://jsfiddle.net/m7hev81t/2/

完整示例，第二个按钮现在触发事件。

$('button').on('click',function(e){
	$('#log').html('clicked ' + new Date().getTime());
});

button {
  position:relative;
  background:transparent;
  border:none;
  height:50px;
  width:200px;
  cursor:pointer;
}

button .state { 
  position:absolute;
  width:100%;
  height:100%;
  display:none;
  top:0; left:0;
}

.state.off { background:green; display:block; }
.state.on { background:orange;}
.state.down { background:red; }

button:hover .state.off, button:hover .state.down {display:none;}
button:hover .state.on {display:block;}

button.has-down .state { pointer-events:none; }
button.has-down:active .state.on, button.has-down:active .state.off {display:none;}
button.has-down:active .state.down {display:block;}

#log {
  width:100%;
  border:1px solid grey;
  min-height:2em;
  margin-top:2em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p>
No down/click state.
</p>
<button>
<div class="state off">
off
</div>
<div class="state on">
on
</div>
<div class="state down">
down
</div>
</button>

<p>
Down/click state.
</p>
<button class="has-down">
<div class="state off">
off
</div>
<div class="state on">
on
</div>
<div class="state down">
down
</div>
</button>

<div id="log"/>