Question

我一直在苹果论坛上搜索并在这里搜索，但我似乎无法找到解决方案。

我有一个包含文字的按钮。该按钮是一个“滑动门”图像按钮。该按钮具有javascript事件侦听器。当用户单击按钮中的文本时按钮不起作用，但是当用户单击按钮的图像区域时，它确实有效。

知道如何解决这个问题吗？

HTML

<div class="buttonWrapper listener">
    <div class="button">
        <div class="buttonText">Next</div>
    </div>
</div>

CSS

.buttonWrapper{
    position: relative;
    z-index: 3;
    width:100%;
    max-width: 477px;
    height:152px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    background-color: green;
}
.button{
    position: absolute;
    z-index: 1;
    width:100%;
    max-width: 477px;
    height:304px;
    background-color:red;
}
.button:hover{
    opacity:0.7;
}
.button:active{
    top:-152px;
}
.buttonClicked{
    top:-152px;
}
.buttonText{
    position: absolute;
    top:0;
    width: 100%;
    height:304px;
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    line-height: 152px;
    text-align: center;
}

我已经把一个JSFiddle放在一起来展示这个问题。

http://jsfiddle.net/xv5of614/4/

在OSX Safari上单击文本，没有任何反应。然后单击读取按钮区域，触发警报。

我还应该补充一点，如果使用一个href来代替监听器，也会发生这种情况。

有谁知道如何解决这个问题？

Answer 1

尝试将pointer-events: none;添加到.buttonText选择器：

.buttonText{
    pointer-events: none;
    position: absolute;
    top:0;
    width: 100%;
    height:304px;
    text-transform: uppercase;
    font-size: 30px;
    color: #fff;
    line-height: 152px;
    text-align: center;
}

小提琴：http://jsfiddle.net/xv5of614/5/

指针事件的MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 2

未经考验的想法：

将事件监听器移动到按钮文本，所以：

$('.buttonText').click(function(e){
    alert('clicked');
});

由于按钮内的文字位于其他所有内容之上，因此请将其作为可点击项目。

希望有所帮助。

Safari中的文本/图像按钮未单击

2 个答案: