Table的onMouseOver和onMouseOut鼠标事件的问题

看下面这段代码:

我们需要给某个TABLE加上鼠标事件的时候,一般希望当鼠标滑在整个TABLE之上的时候做某些处理,当鼠标滑出TABLE的时候做另外的处理. 一般情况下你会用onmouseover和onmouseout,代码如下:

<TABLE border="1" width=200 onmouseover="alert('鼠标滑进')" onmouseout="alert('鼠标滑出')">
<TR>
<TD id="TD1" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单1</TD>
</TR>
<tr>
<TD id="TD2" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单2</TD>
</TR>
<TR>
<TD id="TD3" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单3</TD>
</TR>
</TABLE>
按常理说:当鼠标进入table的时候就会弹出"鼠标滑进",当鼠标离开table的时候就会弹出"鼠标滑出"
但事实情况却是会不停地弹出"鼠标滑进""鼠标滑出",因为鼠标在TD之间滑动时也会触发TABLE的onmouseover和onmouseout事件。

如果是在IE下,则可以换用onmouseenter和onmouseleave来解决,示例代码如下:

<TABLE border="1" width=200 onmouseenter="alert('鼠标滑进')" onmouseleave="alert('鼠标滑出')">
<TR>
<TD id="TD1" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单1</TD>
</TR>
<tr>
<TD id="TD2" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单2</TD>
</TR>
<TR>
<TD id="TD3" noWrap height=25 onmouseenter="this.style.color='red'"> 菜单3</TD>
</TR>
</TABLE>

如果是其他浏览器,则需要判断鼠标指针的坐标是否处于TABLE之外.示例代码如下(网上搜集):

<style type="text/css">...
html, body {...}{
padding:0px;
margin:0px;
}
</style><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

<table id="ta" width="350" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#996633"> </td>
<td bgcolor="#234633"><button > Clos</button></td>
<td bgcolor="#0000FF"> </td>
</tr>
</table>
<script type="text/javascript">...
var rePosition = function (o) ...{
//获取元素绝对位置
var $x = $y = 0;
do ...{
$x += o.offsetLeft;
$y += o.offsetTop;
} while ((o = o.offsetParent) && o.tagName != "BODY");
return ...{ x : $x, y : $y };
};

window.onload = function () ...{
var wc = document.getElementById("ta"), ing = false;
wc.onmouseover = function () ...{
if (!ing) ...{
ing = true;
alert("over");
}
};

wc.onmouseout = function () ...{
var wc = this, e = window.event || e,
x = document.body.scrollLeft + e.clientX, y = document.body.scrollTop + e.clientY, p = rePosition(wc);
//alert(y);
if (x <= p.x || x >= (p.x + wc.offsetWidth) || y <= p.y || y >= (p.y + wc.offsetHeight)) ...{
alert("out");
ing = false;
}
};
};
</script>



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/fishsoul/archive/2007/09/26/1801898.aspx
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 Bootstrap Table 提供的 `onMouseOver` 和 `onMouseOut` 事件来实现悬浮列事件。具体步骤如下: 1. 在表格的 `columns` 属性中添加一个新列,该列用于显示悬浮内容。 ```javascript var columns = [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'salary', title: 'Salary' }, { field: 'hoverContent', // 新增列 title: 'Hover Content', visible: false // 设置该列不可见 }]; ``` 2. 在表格的 `data` 属性中为每一行数据添加悬浮内容。 ```javascript var data = [{ id: 1, name: 'John', salary: '$1000', hoverContent: 'This is John\'s hover content.' // 悬浮内容 }, { id: 2, name: 'Jane', salary: '$2000', hoverContent: 'This is Jane\'s hover content.' }]; ``` 3. 在表格的 `options` 属性中设置 `onMouseOver` 和 `onMouseOut` 事件。 ```javascript var options = { onClickCell: function(field, value, row, $element) { // 当单元格被点击时触发 }, onMouseOver: function(row, $element) { var $td = $element.closest('td'); var index = $td.index(); var $tr = $td.closest('tr'); var $hoverTd = $tr.find('td').eq(index + 1); // 获取悬浮列 var hoverContent = row.hoverContent; // 获取悬浮内容 $hoverTd.text(hoverContent); // 设置悬浮列内容 $hoverTd.show(); // 显示悬浮列 }, onMouseOut: function(row, $element) { var $td = $element.closest('td'); var index = $td.index(); var $tr = $td.closest('tr'); var $hoverTd = $tr.find('td').eq(index + 1); $hoverTd.hide(); // 隐藏悬浮列 } }; ``` 在上述代码中,`onMouseOver` 事件会在鼠标悬浮在单元格上时触发,获取悬浮列和悬浮内容后设置悬浮列的内容并显示悬浮列;`onMouseOut` 事件会在鼠标离开单元格时触发,隐藏悬浮列。需要注意的是,该方法只适用于单元格宽度不变的情况下。如果单元格宽度可变,需要重新计算悬浮列的位置。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值