`

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那么就不会出现这个问题喽!
    
 
分享到:
评论

相关推荐

    VUE解决 v-html不能触发点击事件的问题

    背景:后端返前端html格式的数据,前端用v-html解析渲染,如:&lt;a&gt;&lt;/a&gt;,a标签能成功渲染,但其绑定的事件无法触发。 原因:vue没有将其作为vue的模板解析渲染 解决方案:不用v-html而是component模板编译 上干货: ...

    解决vue 绑定对象内点击事件失效问题

    在Vue中,直接在DOM元素上使用原生的JavaScript事件监听器(如onclick)将不会生效,因为Vue模板有自己的一套事件绑定机制。在这个机制中,需要使用Vue的指令v-on或者简写为@来绑定事件。 要解决绑定对象内点击事件...

    隐藏与显示事件

    在标题“隐藏与显示事件”中,我们关注的是如何通过编程控制UI元素的可见性,使得用户能够根据需求查看或隐藏特定内容。这种技术在电子商务网站、应用程序和其他互动式平台中尤其常见,例如在描述中提到的场景:点击...

    关于innerHTML后丢失动态绑定的EVENT问题解决方法

    在这个例子中,我们给`id`为`d1`的`div`元素绑定了一个点击事件处理函数,然后将整个`body`的`innerHTML`保存到变量`html`中,再将其赋值回`body`的`innerHTML`。这个过程虽然看起来只是简单地替换内容,但实际上会...

    Vue在chrome44偶现点击子元素事件无法冒泡的解决方法

    在实际应用中,当点击绿色方框(`&lt;div class="green"&gt;`)内的任何位置,事件应该能够正常冒泡并触发相应逻辑。 然而,问题在于,当用户点击红色圆圈下方的区域时,`onClick`方法才会被正确触发。这意味着只有当点击...

    JS之Session超时提示代码

    var divtime = "&lt;div&gt;session is about to expire &lt;div id='timeoutDiv' align='center'&gt;&lt;/div&gt;&lt;/div&gt;"; var timer; var x = 10; ``` - `timeIndex`:记录自上次用户操作以来的时间间隔。 - `divtime`:定义了提示框...

    善用事件代理,警惕闭包的性能陷阱。

    描述中提到的问题在于,当div内的DOM结构发生变化,比如增加或删除a标签,原有的事件绑定可能失效,需要重新绑定。此外,由于闭包的存在,内存占用将持续,除非手动清理。 为了优化这种情况,我们可以利用事件代理...

    js使用小技巧

    对象绑定事件 document.all.xxx.detachEvent("onclick",a); 插件数目 navigator.plugins 取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 ...

    jquery培训文档

    此时,`width` 和 `height` 参数将失效,默认值为 `false`。 - **border**:布尔类型,决定是否显示 Accordion 边界,默认值为 `true`。 2. **面板参数** - **title**:面板的标题。 - **iconCls**:面板的图标...

    jqueryAPI教程

    | fit | 布尔 | 是否使可折叠标签自动缩放以适应父容器的大小,当为 true 时 width 和 height 参数将失效。 | false | | border | 布尔 | 是否显示边界线。 | true | **面板参数:** Accordion 面板继承自 Panel ...

    ASP.NET复习思考题

    - 客户端事件包括系统事件(如onload、onunload、onresize)、鼠标事件(如onclick、onmouseover)、键盘事件(如onkeyup、onkeydown)以及控件事件(如onchange、onfocus)等。 - 通过event对象可以获取鼠标事件...

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    imgs.onclick = function () { if (flag == 0) { input.type = 'text'; imgs.src = '2.png';//睁眼图 flag = 1; } else { input.type = 'password'; imgs.src = '1.png';//闭眼图 flag = 0; } }; ``` 总结...

    Jquery easy ui Tree组件使用(tree11.json当数据源有bug)

    5. **事件绑定失效**:在使用Tree组件时,可能需要监听某些事件(如`onSelect`、`onClick`等)。确保事件绑定代码无误,并在正确的时机执行。 对于上述问题,解决方案通常包括检查和修正JSON数据格式,调整加载数据...

    JavaScript实现自动消除按钮功能的方法

    在JavaScript编程中,有时我们需要实现特定的交互效果,例如消除某个按钮的功能,使其在特定条件下失效。本篇文章将深入探讨如何使用JavaScript实现自动消除按钮功能,以及如何操作页面元素属性来实现这一目标。 ...

    Nginx文件上传进度显示

    &lt;div id="progress"&gt;&lt;/div&gt; ``` #### 四、总结 Nginx 的 `nginx_uploadprogress_module` 为开发者提供了便捷的方式来跟踪和显示文件上传进度。通过上述步骤,不仅可以轻松集成到现有项目中,还能够显著提升用户的...

    IE 不兼容的几个js问题及解决方法

    在IE中,使用`setAttribute`方法设置元素的事件监听器可能会失效。 **解决方法:** 推荐使用标准的事件绑定方法: ```javascript var obj = document.getElementById("someElement"); obj.onclick = function() { ...

    BAT及各大互联网公司2014前端笔试面试题--JavaScript篇

    当DOM节点被点击时,可以通过直接在HTML标签内使用onclick属性、通过JavaScript操作onclick属性或使用addEventListener方法来绑定事件。 JavaScript事件流模型: JavaScript中的事件流模型主要有三种,分别是"事件...

    jquery+easyui培训文档 (20111111整理完善)

    - `fit`:是否使可折叠标签自动缩放以适应父容器的大小,如果设置为`true`则`width`和`height`参数将失效,默认为`false`。 - `border`:是否显示边界线,默认为`true`。 - **面板参数**:Accordion中的每个面板...

Global site tag (gtag.js) - Google Analytics