Safari点击事件和活动状态不能共存 [英] Safari click event and active state cannot coexist

问题描述

我尝试创建一个3状态按钮：

I'm try to create a 3-state button:

1. 关闭（默认）


2. On（悬停/翻转）


3. 向下（有效/点击）

Safari桌面和Safari移动，当添加了关闭状态时（通过：active 伪状态），它会终止点击事件。

In both Safari desktop and Safari mobile, when the down state is added (via :active pseudo state) it kills the click event.

为什么可以'这两件作品在一起玩得很好吗？

Why can't these two pieces play nice together?

在这里演示它的简单示例：
https://jsfiddle.net/m7hev81t/1/

Simple example demoing it here: 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"/>

提前感谢您输入！

推荐答案

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

I think the issue is that the states themselves are catching the click event. Then when the state is hidden, the click doesn't bubble up.

添加这一行CSS可以使它工作：

Adding this line of CSS makes it work:

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

这是小提琴： https://jsfiddle.net/m7hev81t/2/

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

And full example, where the second button now triggers the event.

$('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"/>

这篇关于Safari点击事件和活动状态不能共存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！