小试牛刀JavaScript鼠标事件

鼠标事件练习1

当鼠标点击网页某个单元格的时候，其他的单元格颜色不变，只有被点击的单元格颜色发生变化

<style type="text/css">
*{ margin:0;}
#xuankuang{ width:1200px;float:left}
.xuanxiang{ width:290px; height:200px; float:left; background-color:#0F3; margin-bottom:10px; margin-right:10px; margin-left:10px}
</style></head><body>
<div id="xuankuang"> <div class="xuanxiang" οnclick="dianJi(this)"></div>   //this代表调用自身。<div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div></div>
</body><script>function dianJi(m){   //这个m是一个形式参数var b=document.getElementsByClassName("xuanxiang")  用b接收获取的元素数组for(var i=0;i<b.length;i++){b[i].style.backgroundColor="blue";} //通过循环让每一次鼠标放在某个位置的时候所有位置的颜色都变成蓝色。m.style.backgroundColor="red"} //鼠标放在的地方变为红色
</script>

这个鼠标事件练习使用到了数组，用数组通过循环的方式使在每次鼠标点击单元格的时候其他的单元格不变色，只有被点击的发生颜色的变化，定义方法的时候方法名后边的形参要注意。　　

鼠标事件练习2

这个练习是做的一个下拉菜单，下拉菜单带有背景色，选项框的背景色会随着鼠标的移动（不点击选项框）变色，当选中其中一个选项框的时候，所有选项框隐藏，被选中的选项框的内容进到空白的选框内。

<body>
<div id="xxkuang" οnclick="dianJi(this)"></div>
<div id="list" style="display:none"><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">qingdao</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">jinan</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">zibo</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">binzhou</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">linzi</div></div>
</body>
<script>
function fangshang(n){var b=document.getElementsByClassName("xuanxiangka")//括号里的classname要加引号for(var i=0;i<b.length;i++){b[i].style.backgroundColor="white"b[i].style.color="black"}n.style.backgroundColor="red"n.style.color="white"}function dianJi(m){var l=document.getElementById("list")  if(l.style.display=="none"){  //隐藏后边的内容要带上引号，切记！！！l.style.display="block"}else{l.style.display="none"}}function dj(p){document.getElementById("list").style.display="none"; //选中后所有的选项框隐藏document.getElementById("xxkuang").innerText=p.innerText  //选中后被选中的选项框的内容进到空白的选项框内}</script>

　　点击空白单元格的时候下拉菜单的显示与隐藏需要用到判断。

转载于:https://www.cnblogs.com/gaofangquan/p/7050773.html

小试牛刀JavaScript鼠标事件相关推荐

js鼠标事件大全-Javascript鼠标事件大全
js鼠标事件大全-Javascript鼠标事件大全 2009年03月11日星期三 14:22 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick 当键盘上的某个键被按下并且释放时 ...
JavaScript鼠标事件
JavaScript鼠标事件 js中是比较简单的语言,然而js的精髓就是js事件,这也是js当中最重要的部分,很多人对JavaScript鼠标事件是什么还不是很了解,下面我们对JavaScript鼠标 ...
java鼠标js触发事件吗,JavaScript鼠标事件是什么？JavaScript鼠标事件详解
js中是比较简单的语言,然而js的精髓就是js事件,这也是js当中最重要的部分,很多人对JavaScript鼠标事件是什么还不是很了解,下面我们对JavaScript鼠标事件进行详解. 一:在js中, ...
javascript 鼠标事件总结
本文转自:http://www.jb51.net/article/21590.htm javascript的鼠标事件是个比较庞大的家族.需要的朋友可以参考下. 常见的有以下8个: mousedown: ...
JavaScript鼠标事件与函数
通过鼠标触发事件,类似用户的行为: 鼠标事件列表,要在(body)里设一个div,id名要为box,style里设置它的的宽.高,然后再script里设置脚本语言,使他在里面能够运行.下面script ...
JavaScript鼠标事件、键盘事件
常用的键盘事件 keyup 按键弹起的时候触发 // 1.onkeyup document.onkeyup = function(){console.log("弹起"); } // ...
JavaScript鼠标事件及案例
目录一.鼠标事件 1.鼠标事件的常用方法 (1)鼠标事件常用方法 (2) 禁止鼠标右击菜单:contextmenu (3)禁止鼠标选中:selectstart 2.鼠标事件对象 3.案例(图片随着鼠 ...
JavaScript鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup的用法和区别详解
鼠标事件onmousedown,onmousemove,onmouseout,onmouseover,onmouseup详解 1.事件属性如下: 2.下面用一段代码来了解和体验这些鼠标事件的用法: & ...
JavaScript 鼠标事件 mouseEvent
鼠标事件 mouseEvent 这个是有兼容性的问题的,还是低版本IE不支持 e.pageX 返回鼠标相对于文档页面的X坐标,会跟随页面的滚动而获得新坐标,就是在浏览器窗口大小没有变化的前提下,滚动了 ...

小试牛刀JavaScript鼠标事件

小试牛刀JavaScript鼠标事件相关推荐

最新文章

热门文章