實現代碼如下:
function test() {
var lala=document.getElementsByTagName("div");//將所有的div標籤加上點擊事件
for (i=0;i<lala.length;i++){
lala[i].wuss="yes";
lala[i].addEventListener("click",onclickon.bind(lala[i],lala[i]));
}
var lala=document.getElementsByTagName("form");//將所有的form標籤加上點擊事件
for (i=0;i<lala.length;i++){
lala[i].wuss="yes";
lala[i].addEventListener("click",onclickon.bind(lala[i],lala[i]));
}
//PS 還可以自己添加自己想弄的標籤,例如span之類的
//添加hover事件,這裏這麼寫避免的hover重疊的問題 (PS 當然這裏可以寫一個數組,例如type=["div","span"]然後循環數組添加下面的鼠標事件,這樣能更方便管理)
$(function() {
$("div").mouseover(function(e) {
$(this).addClass("hover");
e.stopPropagation();
});
$("div").mouseout(function(e) {
$(this).removeClass("hover");
e.stopPropagation();
});
$("form").mouseover(function(e) {
$(this).addClass("hover");
e.stopPropagation();
});
$("form").mouseout(function(e) {
$(this).removeClass("hover");
e.stopPropagation();
});
});
}
.hover{//這是hover class類
background-color:rgba(33, 150, 243, 0.68);
}
function onclickon(a) {//點擊區域後,自動變顏色,再次點擊,顏色恢復
if (a.style.backgroundColor!="rgba(76, 175, 80, 0.65098)"){
a.style.backgroundColor="rgba(76, 175, 80, 0.65098)";
(function(e){//避免冒泡
var e = window.event || e;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
})(event);
}
else{
a.style.backgroundColor="";
(function(e){
var e = window.event || e;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
})(event)
}
}
可以在中添加該函數,這樣就能網頁一加載就能添加了(PS當然這只能在自己的網站上弄,等這個弄成插件的話就能在其他網站上也進行了)
原文來自我的另一博客——博客地址