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

将事件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浏览器里还是无法阻止冒泡时间的发生。遗留问题！！！

转载于:https://my.oschina.net/u/2249788/blog/351389