Html 整个可点击div内的按钮onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17862228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button onclick inside whole clickable div
提问by Yuri Morales
I have a whole clickable div. This is my code:
我有一个完整的可点击 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>
This is a div with image of product and group name. And when user hover it, inside the div show 2 buttons Edit and Delete. The problem is when I click on any button inside Div, its call the div's onclick, not the button's onclick. PLease any help? Sorry my english.
这是一个带有产品图像和组名称的 div。当用户将其悬停时，div 内会显示 2 个按钮 Edit 和 Delete。问题是当我点击 Div 内的任何按钮时，它调用 div 的 onclick，而不是按钮的 onclick。请帮忙？对不起我的英语。
回答by Yuri Morales
Thanks for all. As say robooneus. I just put this:
谢谢大家。正如 robooneus 所说。我只是把这个：
<button onclick=" location.href = '@Url.Action("NewClass", "Product")'; event.stopPropagation(); ">Edit</button><br/>
And now is working. Thanks all.
现在正在工作。谢谢大家。
回答by Antoine
For your two buttons, create a new function, and add this code at the beginning :
对于您的两个按钮，创建一个新函数，并在开头添加以下代码：
event.cancelBubble = true;
if(event.stopPropagation) event.stopPropagation();
Then add your own code.
然后添加自己的代码。
The Html :
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>
The Javascript :
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")';
}
回答by Sergey Kochetov
Actually both actions(button's and div's) are triggered. You should stop propagation of events using stopPropagation/cancelBubble. Further reading about bubbling: http://javascript.info/tutorial/bubbling-and-capturing
实际上这两个动作（按钮和 div 的）都被触发了。您应该使用 stopPropagation/cancelBubble 停止事件的传播。关于冒泡的进一步阅读：http: //javascript.info/tutorial/bubbling-and-capturing
