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所述，由于事件的冒泡传播，两个动作都被触发。 CF将对其进行修复。

由于只有HTML / JS示例，因此我还将添加一个React示例，以在整个可点击的event.stopPropagation()中修复此onClick：

div

您的句柄应该类似于：

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

请注意，如果不需要，建议不要停止冒泡：

有时event.stopPropagation（）会创建隐藏的陷阱，这些陷阱以后可能会成为问题，例如，如果您要添加document.aaddEventListener（'click'）来捕获所有点击，则无法停止点击const handleRequestClick = (e) => { // this will stop the bubbling effect of the parent and child click events e.stopPropagation() // your actual handle action myLogiccForMyButton() }

完整说明：

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

按钮onclick整个可点击div

4 个答案: