按钮onclick整个可点击div

Question

我有一个完整的可点击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.请问任何帮助？对不起我的英文.

Answer 1

谢谢大家.正如说robooneus.我只想说:

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

现在正在努力.谢谢大家.

Answer 2

对于两个按钮,创建一个新函数,并在开头添加此代码:

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")'; 
}

Answer 3

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

Answer 4

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

\n

由于只有 HTML/JS 示例，我还将添加一个 React 示例来修复整个 clickable 中的 onClick 问题div：

\n

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

\n

你的句柄应该是这样的：

\n

const handleRequestClick = (e) => {\n  // this will stop the bubbling effect of the parent and child click events\n  e.stopPropagation()\n\n // your actual handle action\n myLogiccForMyButton()\n\n} \n

\n

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

\n

有时 event.stopPropagation() 会产生隐藏的陷阱，这些陷阱以后可能会成为问题，例如，如果您要添加一个document.addEventListener('click')来捕获所有点击，则在点击停止的情况下它将不起作用event.stopPropagation()

\n

完整解释：

\n

\n

我们创建一个嵌套菜单。每个子菜单都会处理对其元素的点击并调用 stopPropagation，以便外部菜单不会触发\xe2\x80\x99t。\n后来我们决定捕获整个窗口的点击，以跟踪用户\xe2\x80\x99 的行为（人们点击的位置） ）。一些分析系统可以做到这一点。通常，代码使用 document.addEventListener('click'\xe2\x80\xa6) 来捕获所有点击。\n我们的分析不会\xe2\x80\x99t 处理 stopPropagation 停止点击的区域。遗憾的是，我们\xe2\x80\x99已经得到了\xe2\x80\x9c死区\xe2\x80\x9d。

\n

\n