div的onClick事件怎么失效了？

解决div按钮点击失效问题

最新推荐文章于 2023-07-09 21:06:34 发布

最新推荐文章于 2023-07-09 21:06:34 发布 · 9.7k 阅读

文章标签：

#针对div的onClick事件的失效问题

HTML/css/JS 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了在网页中使用div作为按钮时遇到的问题：只有点击内部内容时才有效，而点击div边界无效。通过引入小div元素并为其设置onClick事件，解决了此问题。文章详细解释了原因及解决方案。

虽然这个问题很简单，但是一不留神就产生了。

由div做的按钮，点两边是无效的，只有在点击内容的时候才有效。

错误的代码1：

<div class="bottomPage" onClick="getPrize()">立即兑换</div>

错误的代码2：

<a onClick="javascript:getPrize();return false;" href="#"><div class="bottomPage">立即兑换</div></a>

正确代码：

<div class="bottomPage"><div class="smallDiv" onClick="getPrize()">立即兑换</div></div>
div .bottomPage {
 height: 35px;
 width: 90%;
 margin: auto auto;
 text-align: center;
 background-color: #EC6C00;
 color: #ffffff;
 font-size: 20px;;
 line-height: 35px;
 font-weight: bolder;
 border-radius: 2px;
}
div .smallDiv{
   width:100%;
 }

这个问题产生的原因就是，div的onClick事件是点击在内容上面的，如果你的内容撑满div那么就不会出现这个问题喽！