html - 为什么 Windows Phone（7 或 8）允许点击槽 div？

Question

当两个 html 元素相互重叠并且后面的元素包含一个锚标记时，WP7 和 8 上的 IE “单击”顶部元素并单击锚。

包括 IE 在内的桌面浏览器和其他移动设备（如 Android 浏览器和 Mobile Safari）没有此行为。

html

<div class="back">
    <a href="mypage.html">Min sida</a><br />
    <a href="mypage.html">Min sida</a><br />
    <a href="mypage.html">Min sida</a><br />
    <a href="mypage.html">Min sida</a><br />
    <a href="mypage.html">Min sida</a><br />
</div>
<div class="front">
</div>

css

.back
    {
        position: absolute;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    .front{
        position: absolute;
        top:0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 2;
        background-color: rgba(255, 0, 0, 0.5);
    }

以下 jsfiddle 显示问题：http: //jsfiddle.net/BSunW/6/

这是预期的行为吗？有没有办法改变这种行为？

Answer 1

我在自定义 Foundation 4 选择框时遇到了同样的问题。我所做的是我已经捕获了下拉列表下方元素的所有点击（它是一个 .footer-ul div），如下所示：

 wp8fix: function() {
        $('.dropdown').click(function(){
            $('.foooter-ul').bind('click',function(e){
                e.stopPropagation();
                return false;
            });
        });
 }

你必须记住在你不再需要它之后解开它

$('.footer-ul').unbind('click');

Answer 2

在 WP8 中唯一对我有用的是：

$("input").prop("disabled", true);
$("option").prop("disabled", true);
$("div").prop("disabled", true);

Answer 3

$('.element_on_the_overlay').click(function(e){
                $('.overlay').preventDefault();
            });

$('.overlay').click(function (event) {
                event.preventDefault();
                event.stopPropagation();
            });

嗨，我找到了这个解决方案。希望你喜欢。:D