在Div嵌套Div时,如果在最顶层DIV写了一个OnMouseOut事件,那么在普通情况下当你移到内层DIV上的时候就会触发到这个事件,但是这往往不是我们想要看到的,这种情况时有以下两种解决方案。
方案一(推荐)
利用Jquery解决
在Jquery中可以直接为要加事件的方法加入到对象中,比如$("#areaSelect").bind("mouseleave",hideAreaSelectForDiv);,在这种情况下Jquery会根据不同的浏览器来用合适的方法处理,减少了很多工作量,不用再去判断,这样写了后只有顶层DIV移出的时候才会触发OnMouseOut事件了。
方案二 (只有IE能用)
直接把对象上的OnMouseOut改成OnMouseLeave这样也会解决
备忘情况
在DIV嵌套DIV时,两个DIV都有自己的ONCLICK方法,普遍情况下,当点击里层ONCLICK方法也外层的ONCLICK方法也会被触发,这时需要判断“事件冒泡”代码如下,加入后就不会再触发到外层的ONCLICK方法
//阻止事件冒泡函数
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
分享到:
相关推荐
代码中使用了`onmouseover`和`onmouseout`事件,当鼠标悬停在`newsOne` div上时,通过调用`clearTimeInterval`函数停止定时器,从而停止div的向上移动;当鼠标从`newsOne` div上移开时,通过`resetInterval`函数重新...
这里通过`<li>`元素来表示主菜单项,并通过嵌套的`<div class="list">`来实现下拉子菜单。 #### 三、CSS样式分析 CSS部分负责定义菜单的样式,包括背景颜色、字体大小等。以下是关键样式规则: ```css * { ...
- 此`div`为最外层容器,通过`onmouseover`和`onmouseout`事件控制其类名的变化,从而实现下拉列表的显示与隐藏。 - `top_nav_con_9_no`类定义了默认状态下的样式,如位置、宽度、高度等。 - 当鼠标悬停时,类名...
当标签tag有嵌套时,需要用到这个 比如选项卡内容是放在div容器里,而本身这个内容里也有div标签,这时就需要用到 菜单嵌套为false,内容嵌套为true,且会自动判断出内容标签,多数时候这样就可以了 判断方法为,...
为生成的每个div元素添加onmouseover和onmouseout事件处理函数,当鼠标移入div元素时,改变其背景色为蓝色,当鼠标移出时,将背景色恢复为之前计算得到的颜色。 6. 多方法实现隔行变色: 除了使用if语句实现隔行...
本文将详细介绍如何利用`onmouseover`和`onmouseout`事件来实现“指向时显示背景色”的功能,并进一步探讨其在实际应用中的多种变体。 #### 一、基础知识介绍 1. **HTML基础**:HTML(HyperText Markup Language)...
3. **事件处理**:JavaScript通过事件处理程序响应用户在网页上的操作,如`onsubmit`处理表单提交,`onclick`处理点击事件,`onmouseover`和`onmouseout`处理鼠标悬停和离开。事件处理程序使得网页能够根据用户的...
- **滚动事件处理**:利用`onmouseover`和`onmouseout`事件控制鼠标悬停时滚动条的行为。 - **DOM操作**:获取DOM元素的属性如`scrollLeft`和`clientWidth`等,用于实时监控滚动状态。 #### 四、部分内容解析 1....
- **鼠标悬停事件处理**:当鼠标悬停在图片上时,会调用 `clearAuto()` 函数暂停播放;鼠标离开后则调用 `setAuto()` 恢复播放。 - **页面元素点击事件**:通过 `onclick` 事件触发指定的函数(如 `Mea(0);`),可以...
每个按钮包含两层嵌套的`div`,一层用于显示遮罩效果(`#fbtn_mask`),另一层则包含了实际的文本内容(`#fbtn_txt`)。这种设计有利于实现更丰富的动态效果。 ### JavaScript事件处理及动画控制 #### 事件绑定 通过`...
在某些情况下,`onmouseleave` 更加精确,特别是在处理有嵌套元素的复杂布局时。 Chrome 浏览器不支持原生的 `onmouseleave` 事件,可能是出于浏览器兼容性和性能考虑。为了解决这个问题,开发者可以利用jQuery库...
- **事件监听**:通过`onmouseover`和`onmouseout`事件控制滚动行为,在鼠标悬停时停止滚动,提高用户体验。 #### 实现技巧与注意事项 - **性能优化**:在实际应用中,可以考虑使用更高效的算法和DOM操作减少...
同时,`onmouseover`和`onmouseout`事件用于暂停和恢复滚动。 接着,我们看C#后台代码。`BindPics`方法根据传入的参数`comId`从数据库获取图片列表,并生成HTML字符串,然后将这个字符串设置给"demo1"的`InnerHtml`...
通过分析提供的代码片段可以发现,整个布局由多个`<table>`元素构成,其中嵌套了一个`<div>`容器用于显示滚动的文字内容。具体结构如下: ```html <div id="maq" style="overflow: hidden; height: 150px; width: ...
为了使用这些代码,你需要将提供的文件导入到你的项目中,并根据自己的需求修改`css.css`中的样式定义,以及可能存在的JavaScript文件中的事件处理和逻辑代码。确保所有引用路径正确,以便浏览器能够加载到相关的...
在网页设计中,二级下拉...同时,通过理解JavaScript的事件处理和DOM操作,可以扩展这个基础模板,实现更复杂的交互功能,如三级菜单、动画过渡等。对于前端开发者来说,掌握这种基础的交互效果实现方法是非常重要的。
为解决这一问题,可以引入JavaScript,通过添加事件监听来模拟`:hover`的效果。例如: ```javascript var sfEls = document.getElementById("nav").getElementsByTagName("li"); for (var i = 0; i ; i++) { sfEls...
4. 事件处理:通过`onmouseover`和`onmouseout`监听鼠标悬停和离开,实现滚动的暂停和恢复。 这个例子展示了如何使用基础的JavaScript知识创建一个动态的网页效果,对于初学者来说是一个很好的实践项目。通过理解这...
- `function(){...}`,匿名函数,作为事件处理程序。 - `this.getElementsByTagName("ul").item(0).style.display="block";`,当鼠标悬停在某个主菜单项上时,显示该菜单项下的子菜单。 - `nav_li[j]....
6. **JavaScript事件**:虽然题目要求使用纯CSS实现,但代码中还是使用了一些JavaScript事件处理函数(如`onmousemove`和`onmouseout`),这在实际应用中可能需要调整为纯CSS的解决方案,例如使用CSS的`:hover`和`+`...