Question

我有一个叠加DIV，绝对位置宽度高度和宽度为100％。但是当我点击叠加DIV时，会在叠加DIV的基础元素上发生单击。叠加DIV样式如下

 .overlayDIV{
     absolute : absolute;
     height : 100%;
     width : 100%;  
     z-index : 1234;       
 }

我该怎样防止......？此问题仅存在于Windows mobile

中

Answer 1

您可以停止传播事件：

JavaScript的：

document.getElementById('divId').onclick = function (event) {
    event.preventDefault();
    event.stopPropagation();
}

jQuery的：

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

此外，如果您在页面上有一些处理器，则需要从叠加div中取消mousedown（相同的代码，但是对于mousedown处理程序）。

Answer 2

我在IE 10中遇到过这种情况但不是11，我的解决方案是将以下CSS规则添加到叠加层中：

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="172dp"
            android:background="@drawable/drawer_background"
            android:orientation="horizontal">
        </LinearLayout>

        <RelativeLayout 
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/icon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:src="@drawable/ic_add_black" />

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toEndOf="@+id/icon"
                android:layout_toRightOf="@+id/icon"
                android:gravity="center_vertical"
                android:text="Line 1"
                android:textColor="#000"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/subTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/title"
                android:layout_toRightOf="@+id/icon"
                android:text="Line 2" />

        </RelativeLayout>
    </LinearLayout>
</android.support.design.widget.NavigationView>

单击Windows移动触发中的绝对DIV单击基础元素

2 个答案: