文档章节

用JS实现点击DIV改变背景样式,再次点击后背景恢复

Jun_Lemon
 Jun_Lemon
发布于 2014/12/02 12:55
字数 279
阅读 355
收藏 0

将事件onclick加入到目标的div标签里,通过点击事件函数调用,记住在chrome下将颜色写成RGB的色值方式,写成16进制的无效(#******);

HTML代码:

<div style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">

JS代码如下:

function selFuc(obj){
    if (obj.style.backgroundColor == "rgb(255, 255, 255)"){
        obj.style.backgroundColor="#1ec5e5";
    }
    else{
        obj.style.backgroundColor="rgb(255, 255, 255)";
    }

}

但是如果在div内还有子级甚至孙级的div也加入了onclick事件的话,需要通过阻止冒泡事件来实现(冒泡事件相关见:http://www.jb51.net/article/42492.htm  ),点击子div或者孙div时不触发父级的div里的点击事件的发生。具体代码如下:

JS代码:

function stopEventBubble(event){
    var e=event || window.event;
    if (e && e.stopPropagation){
        e.stopPropagation();  //非IE
    } else {
        e.cancelBubble=true;  //IE
    }
}


function poiSel(obj) {
    if (obj.style.backgroundColor == "rgb(211, 211, 211)"){
        obj.style.backgroundColor = "#438eb9";
    } else{
        obj.style.backgroundColor = "rgb(211, 211, 211)";
    }
    var event = onclick;
    stopEventBubble(event);
}

目前此功能能很好的实现在IE和chrome浏览器下,但是不知道为什么在firefox浏览器里还是无法阻止冒泡时间的发生。遗留问题!!!



© 著作权归作者所有

Jun_Lemon
粉丝 1
博文 4
码字总数 2402
作品 0
朝阳
QA/测试工程师
私信 提问
vue div backgroundSize 不起作用的解决办法

在使用绑定样式的功能时,发现对div的backgroundSize属性设置不起作用,于是只能 使用一个比较笨拙的办法,解决这个问题 初始加载是生效的,但是之后当点击按钮改变图片地址后,无法填充背景...

阿豪boy
2018/02/27
242
0
jQuery zxxbox弹出框插件(v3.0)测试页面

源文件下载.zip 16.6k 一、内置弹框 显示最简单的内置的信息确定提示框:点击我 $("#test1").click(function(){ $.zxxbox.remind("你已成功受邀参加威尼斯电影节。"); }); 带回调函数的信息确...

mickelfeng
2013/01/07
158
0
拥抱更底层技术——从CSS变量到Houdini

0. 前言 平时写CSS,感觉有很多多余的代码或者不好实现的方法,于是有了预处理器的解决方案,主旨是write less &do more。其实原生css中,用上css变量也不差,加上bem命名规则只要嵌套不深也...

lhyt
2018/10/31
0
0
如何在零JS代码情况下实现一个实时聊天功能❓

引言 前段时间在 github 上看到了一个很“trick”的项目:用纯 CSS(即不使用 JavaScript)实现一个聊天应用 —— css-only-chat。即下图所示效果。 在我们的印象里,实现一个简单的聊天应用...

AlienZHOU
05/20
0
0
使用canvas保存网页为pdf文件支持跨域

前言 之前上一篇随笔说了Canvas截图网页为图片,下来个新需求,把网页截图后保存为PDF文件供用户下载。 使用canvas保存网页为pdf文件支持跨域 正文 需求:用户点击下载,将页面保存为PDF文件...

嫣然丫丫丫
2018/11/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PCB设计-Allegro软件入门系列-allegro环境变量和快捷键

Allegro作为一款高速PCB设计的EDA软件,有完善的约束规则设计和信号完整性电源完整性仿真等各种专业工具深受电子行业从业者喜爱。 对于该软件来说,电子从业者接触最多的就是Allegro的画板功...

demyar
11分钟前
1
0
腾讯云存储

1、进入腾讯云平台,创建 2、进入配置查看域名 3、查看KEY参数 4、将2、3中的参数录入到cms后台 然后点测试按钮查看情况

迅睿CMS-PHP开源CMS程序
12分钟前
1
0
ES 6.x 版本 待验证的CURL命令查询操作

1. 查询数据 curl -H "Content-Type: application/json" -XGET http://elastic:123456@127.0.0.1:9200/alias1/_search -d '{"query": {"match_all": {}}}' 2. 添加数据 如果有不指定ID可以自......

coord
20分钟前
1
0
如何写好论文摘要:研究人员不得不知的小秘诀

我们为何要写摘要? 它的目的为何? 简而言之,摘要的目的就是简单的讨论这篇文章让读者更容易的了解这篇文。 它能在读者与作者之间搭起一条桥梁。当您搜索信息时,您无法一下阅读整篇文章,...

论文辅导员
23分钟前
1
0
移动端、PC端(前后台)、小程序常用的UI框架

移动端、PC端(前后台)、小程序常用的UI框架 1.移动端UI库 ①.Vant UI 官方地址:https://youzan.github.io/vant/#/zh-CN/intro github地址:https://github.com/youzan/vant 优点:用来做移...

jason_kiss
23分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部