Question

我有一个点击监听器附加到我的#main容器

main.addEventListener("click", function() {
    console.log("clicked main");
});

在我的主容器中，我有一个带有点击监听器的#element

element.addEventListener("click", function() {
    console.log("clicked element but dont trigger main click");
});

在#main内点击时，如何避免触发#element点击？

小提琴：http://jsfiddle.net/gufo7mmc/1/

Answer 1

使用event.stopPropagation()

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp">

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/category_sel_icon"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:layout_marginLeft="@dimen/larger_margin"
        android:layout_marginStart="@dimen/larger_margin"/>

    <TextView
        android:id="@+id/category_sel_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/middle_margin"
        android:layout_marginStart="@dimen/middle_margin"
        android:layout_marginRight="@dimen/large_margin"
        android:layout_marginEnd="@dimen/large_margin"
        android:singleLine="true"
        android:textSize="18sp"/>
</LinearLayout>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <CheckBox
        android:id="@+id/category_sel_checkbox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/five_margin"
        android:layout_marginStart="@dimen/five_margin"/>
</FrameLayout>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/categorySelectionOptions"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginLeft="@dimen/main_middle_margin"
        android:layout_marginStart="@dimen/main_middle_margin"
        android:background="@drawable/row_selector_list_dots"
        android:layout_gravity="end"
        android:clickable="true"
        android:src="@drawable/ic_action_drawer_dots"
        android:contentDescription="@string/image" />
</FrameLayout>

element.addEventListener("click", function() {
    console.log("clicked element but dont trigger main click");
    event.stopPropagation();
});

var main = document.getElementById("main");
var element = document.getElementById("element");
var textElement = document.getElementById("text");

main.addEventListener("click", function() {
    console.log("clicked main");
});

main.addEventListener("mouseenter", function() {
    textElement.style.visibility = "visible";
    console.log("trigger on everything except #element");
});

main.addEventListener("mouseleave", function() {
    textElement.style.visibility = "hidden";
});

element.addEventListener("click", function() {
    console.log("clicked element but dont trigger main click");
    event.stopPropagation();
});

#main {
    position: absolute;
    width: 300px;
    height: 600px;
    
    background-color: red;
}

#element {
    position: absolute;
    width: 100%;
    height: 100px;
    
    background-color: green;
}

#text {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 200px;
    
    background-color: blue;
    visibility: hidden;
}

如果单击特定子元素，请不要触发主容器单击

1 个答案: