将按钮的操作与其 div 的操作隔离开来

【问题标题】：isolate the action of a button from the action of it's div将按钮的操作与其 div 的操作隔离开来
【发布时间】：2012-05-18 16:11:33
【问题描述】：

我的项目中有一个 div，在这个 div 上有一个按钮，该按钮具有向下滑动 div 的动作，但 div 本身有一个动作 onclick 以向上滑动

这里的问题是，当我单击按钮时，按钮的动作完成，div 向下滑动，但 div 的动作被触发并再次向上滑动，因为按钮是它的一部分

我希望我能告诉你重点这是一些代码

<div id='container' onclick='slideup()'>
    <button onclick='slidedown()'>click</button>
</div>

其中slideup和slidedown是我在javascript中添加的函数

【问题讨论】：

标签： javascript jquery html css web

【解决方案1】：

将return false 添加到function slidedown

<div id='container' onclick='slideup()'>
    <button onclick='slidedown()'>click</button>
</div>

function slidedown(){
    ...
    ...
    return false;
}

既然你标记了你的问题jQuery，为什么不使用这个很棒的库呢？

$('#container button').click(function(){ // or use $('#button-id')...
    slidedown();
    return false;
});

$('#container button').click(slideup);

更新的 HTML

<div id='container'>
    <button >click</button> <!-- better give that button an id-->
</div>

【讨论】：

或者，使用 jQuery，stopPropagation()