31

我有一个完整的可点击 div。这是我的代码：

<div onclick="location.href='@Url.Action("SubClass", "Product", new { id = productClass.HierarchyId })';" class="menu-class">
            <img src="~/Images/ClassImages/@imageName" alt="@productClass.HierarchyShort" />
            <div class="menu-class-text">
                <span>@productClass.HierarchyShort</span>
            </div>
            <div class="menu-class-admin-options">
                <button onclick=" location.href = '@Url.Action("EditClass", "Product")'; ">Edit</button><br/>
                <button onclick=" location.href = '@Url.Action("DeleteClass", "Product")'; ">Delete</button>
            </div>
        </div>

这是一个带有产品图像和组名称的 div。当用户悬停它时，在 div 内显示 2 个按钮编辑和删除。问题是当我单击 Div 内的任何按钮时，它调用 div 的 onclick，而不是按钮的 onclick。请帮忙？对不起我的英语。

4

4 回答 4

30

谢谢大家。正如robooneus所说。我只是把这个：

<button onclick=" location.href = '@Url.Action("NewClass", "Product")'; event.stopPropagation(); ">Edit</button><br/>

现在正在工作。谢谢大家。

于 2013-07-25T15:42:01.707 回答
16

对于您的两个按钮，创建一个新函数，并在开头添加以下代码：

event.cancelBubble = true;
if(event.stopPropagation) event.stopPropagation();

然后添加您自己的代码。

的HTML：

<div onclick="location.href='@Url.Action("SubClass", "Product", new { id = productClass.HierarchyId })';" class="menu-class">
        <img src="~/Images/ClassImages/@imageName" alt="@productClass.HierarchyShort" />
        <div class="menu-class-text">
            <span>@productClass.HierarchyShort</span>
        </div>
        <div class="menu-class-admin-options">
            <button onclick="editClass()">Edit</button><br/>
            <button onclick="deleteClass()"; ">Delete</button>
        </div>
    </div>

Javascript：

function editClass() {
   event.cancelBubble = true;
   if(event.stopPropagation) event.stopPropagation();

   location.href = '@Url.Action("EditClass", "Product")';
}

function deleteClass() {
   event.cancelBubble = true;
   if(event.stopPropagation) event.stopPropagation();$

   location.href = '@Url.Action("DeleteClass", "Product")'; 
}
于 2013-07-25T15:40:52.827 回答
12

实际上，两个动作（按钮和 div）都被触发了。您应该使用 stopPropagation/cancelBubble 停止事件传播。关于冒泡的进一步阅读：http: //javascript.info/tutorial/bubbling-and-capturing

于 2013-07-25T15:31:28.323 回答
3

正如@Sergey 提到的，这两个动作都是由于事件的冒泡传播而被触发的。将event.stopPropagation()修复它。

由于只有 HTML/JS 示例，我还将添加一个 React 示例来修复整个可点击内容中的 onClick div：

<div onClick={requestSort()}>
  <DefaultButton onClick={(event) => handleRequestClick(event)} />
</div>

你的句柄应该是这样的：

const handleRequestClick = (e) => {
  // this will stop the bubbling effect of the parent and child click events
  e.stopPropagation()

 // your actual handle action
 myLogiccForMyButton()

}

请注意，如果没有必要，建议不要停止冒泡：

有时 event.stopPropagation() 会创建隐藏的陷阱，以后可能会成为问题，例如，如果您要添加一个 document.aaddEventListener('click') 来捕获所有点击，它在点击停止的地方将不起作用event.stopPropagation()

完整解释：

我们创建一个嵌套菜单。每个子菜单处理对其元素的点击并调用 stopPropagation 以便外部菜单不会触发。后来我们决定捕捉整个窗口的点击，以跟踪用户的行为（人们点击的地方）。一些分析系统会这样做。通常代码使用 document.addEventListener('click'...) 来捕获所有点击。我们的分析不适用于 stopPropagation 停止点击的区域。可悲的是，我们有一个“死区”。

于 2020-12-09T14:43:49.637 回答