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

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

1. 关（默认）
2. 开（hover/翻转）
3. 向下（活动/点击）

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

为什么这两件作品不能很好地搭配在一起呢？

在这里演示它的简单示例： 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; } 

  
 No down/click state. 
  
 off 
 
 on 
 
 down 
  
 Down/click state. 
  
 off 
 
 on 
 
 down 
  
 

在此先感谢您的投入！

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

  
 No down/click state. 
  
 off 
 
 on 
 
 down 
  
 Down/click state. 
  
 off 
 
 on 
 
 down 
  
 

Answer 2

MDN

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

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

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

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