JS一些鼠标事件

最新推荐文章于 2024-07-03 19:41:47 发布
最新推荐文章于 2024-07-03 19:41:47 发布
阅读量470 收藏
点赞数
分类专栏： WEB 文章标签： html javascript null border function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/javatim/article/details/1831347
版权
一、点击后，文字变色实例：IE6下测试；
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>鼠标点击表格行背景变色</TITLE>
<style>
td{width:30px;height:30px;background-color:pink;}
</style>
</HEAD>
<BODY>
<table width="245" border=1  id="tb">
<tr>
<td width="58">鼠标点击</td>
<td width="90">鼠标点击</td>
<td width="75">鼠标点击</td>
</tr>
<tr>
<td>鼠标点击</td>
<td>鼠标点击</td>
<td>鼠标点击</td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
var TD = tb.all.tags("TD");
var ObjTemp=null;
var eventColor={mouseover:"",mouseout:"black",click:"red"};
for (var i=0;i<TD.length;i++){
TD(i).οnmοuseοver=TdEvent;
TD(i).onmouseout =TdEvent;
TD(i).onclick    =TdEvent;
}
function TdEvent(){
var obj = event.srcElement;
if (ObjTemp==obj) return;
obj.style.color=eval("eventColor."+event.type);
if (event.type=="click") {
  if (ObjTemp!=null)ObjTemp.style.color="";
    ObjTemp=obj;
   }
}
//-->
</SCRIPT>
</BODY>
</HTML>
2，鼠标点击后，背景变色：测试IE6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>鼠标点击表格行背景变色</TITLE>
<style>
td{width:30px;height:30px;background-color:pink;}
</style>
</HEAD>
<BODY>
<table border=1 bordercolor="black" id="tb">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
var TD = tb.all.tags("TD");
var ObjTemp=null;
var eventColor={mouseover:"blue",mouseout:"pink",click:"red"};
for (var i=0;i<TD.length;i++){
TD(i).οnmοuseοver=TdEvent;
TD(i).onmouseout =TdEvent;
TD(i).onclick    =TdEvent;
}
function TdEvent(){
var obj = event.srcElement;
if (ObjTemp==obj) return;
obj.style.backgroundColor=eval("eventColor."+event.type);
if (event.type=="click") {
if (ObjTemp!=null)ObjTemp.style.backgroundColor="";
ObjTemp=obj;
}}
//-->
</SCRIPT>
</BODY>
</HTML>
 
javatim
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript鼠标事件
m0_57759387的博客
08-28 270
JavaScript鼠标事件 js中是比较简单的语言，然而js的精髓就是js事件，这也是js当中最重要的部分，很多人对JavaScript鼠标事件是什么还不是很了解，下面我们对JavaScript鼠标事件进行详解。 鼠标事件（Mouse Events） 通过鼠标触发事件, 类似用户的行为: 属性 值 描述 onclick script 当单击鼠标时运行脚本 ondb
JS——鼠标事件
weixin_45846357的博客
05-05 171
onclick 单击事件（相继触发mousedown与mouseup事件） ondblclick：双击 onmousedown 鼠标按下事件 onmouseup 鼠标抬起事件 onmousemove 鼠标移动事件 onmouseout 鼠标移出事件 onmouseover 鼠标指针移动到元素（被选元素或其子元素）上时触发常与onmouseout一起用 onmouseenter 只有在鼠标指针穿过...
js鼠标事件大全
fuda_1985的专栏
05-06 470
js鼠标事件大全 一般事件事件        浏览器支持        描述onClick        IE3|N2|O        鼠标点击事件，多用在某个对象控制的范围内的鼠标点击onDblClick        IE4|N4|O        鼠标双击事件onMouseDown        IE4|N4|O        鼠标上的按钮被按下了onMouseU
JavaScript常见鼠标事件
liGermini526的博客
03-16 3564
对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。
JavaScript的鼠标事件（js的鼠标事件，vue的鼠标事件）
weixin_65793170的博客
12-12 3838
js鼠标事件，相关属性： var div = document.getElementById("box") // 1、单击事件 onclick div.onclick = function(){ console.log("单击") } // 2、双击事件 ondblclick
javascript 鼠标滚轮事件
10-30
由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
js 鼠标事件的抓取
12-11
设置鼠标事件的抓取。 2，应用可以通过单、双击文字来获取时间。 代码如下： 鼠标事件的抓取 鼠标事件的抓取 接收鼠标事件的HTML元素 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
JavaScript鼠标悬停事件用法解析
10-15
JavaScript中的鼠标悬停事件是网页交互中常用的功能，允许开发者在用户将鼠标光标移到特定元素上方或离开该元素时执行相应的操作。本篇文章主要探讨了`onmouseover`和`onmouseleave`两个事件处理程序。 首先，`...
关于js中的鼠标事件总结
12-12
js中鼠标事件主要有onclick，onmousedown，onmouseup，oncontextmenu，ondblclick,所有的这些事件都包含有一个事件对象event，当然在IE低版本下，event对象是挂在window底下的。这个我们另行讨论。 1.通过html添加...
如何将网页内容导出到EXCEL表中……
javatim的专栏
10-18 6479
单元格A单元格A单元格合并行A//指定页面区域内容导入Excelfunction AllAreaExcel(){  var oXL = new ActiveXObject("Excel.Application");  var oWB = oXL.Workbooks.Add();  var oSheet = oWB.ActiveSheet;   var sel=document.body.cre
用setInterval来做图片切换最简单源码
javatim的专栏
02-05 2162
 var curIndex=0; //时间间隔 单位毫秒 1000毫秒=1秒 var timeInterval=3000; var arr=new Array(); arr[0]="images/01.jpg"; arr[1]="images/02.jpg"; arr[2]="images/03.jpg"; arr[3]="images/04.jpg"; arr[4]="images/05.jpg
记录下来的，解决TOMCAT5.5配置虚拟路径出现404误
javatim的专栏
12-04 1386
配置方法：      Tomcat 5.5/server.xml文件，在间加入： 解决办法：以下是 Tomcat 5.5/conf/web.xml文件内容：(你找找，好像是此目录)listingsfalse的默认值是false，修改为true后，虚拟目录（http://localhost:8080/test/）就会以列表的形式展现（像Tomcat5.0默认的那样列出所有文件
Window.Open详解
javatim的专栏
10-16 419
Window.Open详解一、window.open()支持环境：JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+二、基本语法：window.open(pageURL,name,parameters) 其中：pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 三、示例： window.op
一些JS基础应用
javatim的专栏
10-17 375
1，动态提交表单            function toInsert(){            var frm=document.getElementById("userFrm")            var msg = checkData();            if(msg.length>1){                alert(msg);              
如何用简单的html，css，js写出一个带有背景层的删除弹出框
qq_56776909的博客
07-03 365
虽然每次项目都是主要写后端，但是有时候前端的样式太丑了，也有点看不下去。弹出框是项目中用的比较多的，比如删除，修改或者添加什么的，都需要一个弹出框。所以这里简单记录一下，应该如何实现。
qtreewidget 美化，htmlcss和qss 不是一个概念！已解决
PHP代码的博客
07-03 215
这种样式的美化， 能气死个人，css 一个单词搞定，非要 在qss中。多少个单词不知道了。
HTML CSS 基础复习笔记 - 表格标签使用
forevercui的博客
07-03 400
web复习笔记
同时用C++和HTML同时做一个饭店价格统计器
最新发布
weixin_56334307的博客
07-03 171
大家有没有想过在饭店的时候我们讲了很多的不同的大碗小碗的饭算价格要算很久但是利用这个程序就不需要算很久了完了我们可以用c++和html实现这个计算。
ext.js listview鼠标事件
06-07
在 ExtJS 中，ListView 继承自 GridPanel，因此其鼠标事件与 GridPanel 的事件类似，以下是一些常见的鼠标事件： 1. itemclick：当用户单击 ListView 中的某个项时触发，可以通过该事件来处理单击操作。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值