Question

我正在尝试创建一个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; }

这是小提琴：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"/>

Answer 2

MDN

在具有多按钮鼠标的系统上，CSS3指定：active伪类只能应用于主按钮;在右手老鼠身上，这通常是最左边的按钮。

所以我猜不是所有“点击”元素都会触发:active，

在safari上，指向元素的手指或鼠标不计算，除非：

默认情况下，iOS上的Safari不使用：active状态，除非相关元素或元素上有touchstart事件处理程序。

Safari点击事件和活动状态不能共存

2 个答案: