DrawerLayout解决点击事件穿透问题

使用DrawerLayout可以实现侧滑形式的菜单。在点击侧滑菜单的空白区域时,容易出现点击事件的穿透问题。

我是将侧滑菜单的内容单独做成了一个页面,主页面include进来。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/white">

    <include layout="@layout/toolbar"></include>

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawerlayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!--主布局-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <android.support.v4.widget.SwipeRefreshLayout
                android:id="@+id/base_swipe_refresh_lay"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scrollbars="vertical"
                android:scrollbarStyle="insideOverlay"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

                <com.yanzhenjie.recyclerview.swipe.SwipeMenuRecyclerView
                    android:id="@+id/base_rv_list"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scrollbars="vertical"/>
            </android.support.v4.widget.SwipeRefreshLayout>

        </LinearLayout>

        <!--侧滑菜单-->
        <include layout="@layout/search_content_eventlist_drawer"></include>

    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

主页面是显示一个list列表,侧滑菜单进行条件筛选。列表的每个item都是可点击的,可查看详细信息。问题就是侧滑菜单显示时,点击空白区域,就会被下面的item拦截到,跳转到item的明细界面。

由于侧滑菜单的layout没有处理点击事件,而下层的layout中恰好有控件处理该位置的点击事件,所以点击事件向下传递了。

解决办法很简单,在侧滑菜单的layout中添加点击事件的处理,clickable=true。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/searchWhite"
    android:layout_gravity="end"
    android:clickable="true">

    <!--菜单内容-->

</LinearLayout>

 

事件穿透(Event Bubbling)是指当一个元素接收到一个事件时,该事件会逐层向上冒泡传递给其父元素,直到文档根节点。这可能会导致原本想要监听特定元素的事件被父元素意外捕获。解决事件穿透问题通常有以下几种方法: 1. **阻止事件冒泡**:在触发元素的事件处理器中添加`event.stopPropagation()`,可以防止事件继续向上冒泡。 ```javascript element.addEventListener('click', function(event) { // 阻止事件向上冒泡 event.stopPropagation(); // 其他处理逻辑... }); ``` 2. **阻止默认行为**:如果事件有预设的默认动作(比如提交表单),可以使用`event.preventDefault()`防止这个动作发生。 ```javascript element.addEventListener('submit', function(event) { event.preventDefault(); // 自己处理提交操作... }); ``` 3. **选择性监听**:如果你只想让某个特定级别的元素响应事件,可以在父元素上监听`stopPropagation()`事件来拦截。 ```javascript parentElement.addEventListener('click', function(event) { if (event.target !== element) { event.stopPropagation(); // 只对当前元素之外的点击生效 } }); ``` 4. **修改`z-index`或CSS布局**:如果是UI库中层级结构导致的问题,调整元素的堆叠顺序也可能解决问题。 确保你的事件处理逻辑只针对所需的元素进行,避免意外的影响。同时,考虑使用Vue的`v-on.stop`修饰符或在模板中显式指定事件修饰符来简化处理。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值