62,046
社区成员
发帖
与我相关
我的任务
分享js 如何使事件失效？
table中的td，注册了onmouseover和onmouseout事件，当mouseover时变背景色，mouseout时，变回原色。同时，也注册了onclick事件，单击时，背景变色。问题来了，当click时，是会变色，但鼠标只要一离开，就变回原来的颜色了。我想在onclick中使onmouseout事件失效，该怎么写代码呢？
...全文
请发表友善的回复…
发表回复
ywwandsyf 2010-12-05
- 打赏
- 举报
8楼，你说的方法对单个td可用，但是对所有td就比较麻烦。
9楼，弱弱的问一句“$”是什么意思啊？
9楼，弱弱的问一句“$”是什么意思啊？
newdigitime 2010-12-05
- 打赏
- 举报
[Quote=引用 11 楼 ywwandsyf 的回复:]
8楼，你说的方法对单个td可用，但是对所有td就比较麻烦。
9楼，弱弱的问一句“$”是什么意思啊？
[/Quote]
那就在onclick事件代码中加入this.onmouseout="";
然后在onmouseover事件中恢复 this.onmouseout=funtionName;
8楼，你说的方法对单个td可用，但是对所有td就比较麻烦。
9楼，弱弱的问一句“$”是什么意思啊？
[/Quote]
那就在onclick事件代码中加入this.onmouseout="";
然后在onmouseover事件中恢复 this.onmouseout=funtionName;
huangwenquan123 2010-12-04
- 打赏
- 举报
<!--经测试可用-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<style>
table{border:1px solid #CCC}
td{border:1px solid #CCC}
</style>
<script>
$(document).ready(function(){
$("td").mouseover(function(){
$(this).css("background","red");
})
$("td").unbind("mouseout").bind("mouseout",function(){
$(this).css("background","");
})
$("td").click(function(){
if($(this).css("background")=="yellow")
$(this).css("backgroundColor","");
else
$(this).css("backgroundColor","yellow");
$(this).mouseout(function(){
if($(this).css("background")=="yellow")
$(this).css("backgroundColor","");
else
$(this).css("backgroundColor","yellow");
})
})
})
</script>
</head>
<body>
<table>
<tr>
<td>this is a one</td>
<td>this is a two</td>
<td>this is a three</td>
<td>this is a four</td>
</tr>
<tr>
<td>this is a five</td>
<td>this is a six</td>
<td>this is a seven</td>
<td>this is a eight</td>
</tr>
</table>
</body>
</html>
newdigitime 2010-12-04
- 打赏
- 举报
要失效很好办.
但难道你点击之后,就不要onmouseover onmouseout效果了?
如果是这样,那直接加一句
this.onmouseout="";
this.onmouseover="";
如果不想这样.可以弄一个全局变量,默认为0.
当 onclick时,这个变量值改变为1
在onmouseout事件中,判断这个值,如果为0,则事件代码起效,如果为1,表明刚才进行了onclick,则直接return
但难道你点击之后,就不要onmouseover onmouseout效果了?
如果是这样,那直接加一句
this.onmouseout="";
this.onmouseover="";
如果不想这样.可以弄一个全局变量,默认为0.
当 onclick时,这个变量值改变为1
在onmouseout事件中,判断这个值,如果为0,则事件代码起效,如果为1,表明刚才进行了onclick,则直接return
xiao_316 2010-12-04
- 打赏
- 举报
初学者 看看
ywwandsyf 2010-12-04
- 打赏
- 举报
能说得清楚一点吗？
mngzilin 2010-12-04
- 打赏
- 举报
添加js事件addEventListener、attachEvent
删除js事件removeEventListener、detachEvent
删除js事件removeEventListener、detachEvent
wuyq11 2010-12-04
- 打赏
- 举报
onclick= "alert(event.type); " onmouseover= "alert(event.type); " onmouseout= "alert(event.type); "
根据类型操作
根据类型操作
天下在我心 2010-12-04
- 打赏
- 举报
在onclick 事件中重新绑定onmouseout事件，背景色和onclick的一样
ywwandsyf 2010-12-04
- 打赏
- 举报
楼上可以是可以，但是对我要改动很多代码。有没有更直接一点的方法。
ds252743641 2010-12-04
- 打赏
- 举报
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script language="javascript">
function SetTableColor(TableID)
{
var clickClass = ""; //点击样式名
var moveClass = ""; //鼠标经过样式名
var clickTR = null; //点击的行
var moveTR = null; //鼠标经过行
var Ptr = document.getElementById(TableID).getElementsByTagName("tr");
for (i = 1; i < Ptr.length; i++) //若不包含标题行
{
Ptr[i].className = (i % 2 == 0) ? "Rep_Tab_EvenTr" : "Rep_Tab_OddTr";
}
//设置鼠标的动作事件
for (var i = 1; i < Ptr.length; i++)
{
//var Owner = Ptr[i].item;
//鼠标经过事件
Ptr[i].onmouseover = function Move()
{
if (clickTR != this)
{
moveClass = this.className;
moveTR = this;
this.className = "Rep_Tr_Move";
}
}
//鼠标离开事件
Ptr[i].onmouseout = function Out()
{
if (clickTR != this)
{
moveTR = null;
this.className = moveClass;
}
}
//鼠标单击事件
Ptr[i].onclick = function Ck()
{
if (clickTR != this)
{
if (clickTR)
{
clickTR.className = clickClass;
}
clickTR = this;
clickClass = moveClass;
}
this.className = "Rep_Tr_Click";
}
}
}
</script>
<style>
.Rep_tab
{
width: 100%;
margin: 0px auto;
font: Georgia 11px;
font-size: 12px;
font-family: Tahoma, Arial, Helvetica, Sans-serif, "宋体";
color: #333333;
text-align: center;
vertical-align: middle;
border-collapse: collapse; /*细线表格代码*/
}
/* Repeater内部Table的td样式 */
.Rep_tab td
{
border: 1px solid #4d9ab0; /*细线表格线条颜色*/
height: 25px;
}
/* Repeater内部Table的th样式 */
.Rep_tab th
{
border: 1px solid #111; /*细线表格线条颜色*/
background-color: #e5f1f4;
color: #000000;
height: 25px;
}
/* Repeater内部Table的caption样式 */
.Rep_tab caption
{
text-align: center;
font-size: 12px;
font-weight: bold;
margin: 0 auto;
}
/* Repeater内部Table的TR的奇数行样式 */
.Rep_Tab_OddTr
{
background-color: #f8fbfc;
color: #000000;
height: 25px;
}
/* Repeater内部Table的TR的偶数行样式 */
.Rep_Tab_EvenTr
{
background-color: #e5f1f4;
color: #000000;
height: 25px;
}
.Rep_Tab_HeaderTr
{
background-color: #ffffee;
color: #000000;
}
/*鼠标经过的颜色*/
.Rep_Tr_Move
{
background-color: #ecfbd4;
color: #000000;
height: 25px;
}
/* 鼠标点击的颜色*/.Rep_Tr_Click
{
background-color: #bce774;
color: #333333;
height: 25px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Repeater ID="Rep" runat="server">
<HeaderTemplate>
<table id="Tab" class="Rep_tab">
<tr>
<th >
编号
</th>
<th >
其他
</th>
<th>
内容
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%#DataBinder.Eval(Container.DataItem, "id")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem, "PkID")%>
</td>
<td>
<%#DataBinder.Eval(Container.DataItem, "Title")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
<script type="text/javascript" language="javascript">
window.onload = SetTableColor("Tab");
</script>
</body>
</html>
