当我鼠标点击那个复选框的时候为什么无法选中呢?

humanblue 2010-01-19 10:22:01
我加了一个鼠标事件,就是当鼠标在<tr>内时候选中复选框

但是

当我鼠标点击那个复选框的时候为什么无法选中呢?

<html>
<head>
<script type="text/javascript">
// 产品管理鼠标事件
var productMouseDown = function(id)
{
if (document.getElementById('price_' + id).checked == false) {
document.getElementById('price_' + id).checked = true;
}
}
</script>
</head>
<body>
<table>
<tr onmousedown="return productMouseDown(1)">
<td width="150">
¥<input type="checkbox" value="" class="w50" id="price_1">
<span class="manage-p-t">10-01-18</span>
</td>
<td width="150">
ddddddddd
</td>
</tr>
<tr onmousedown="return productMouseDown(2)">
<td width="150">
¥<input type="checkbox" value="" class="w50" id="price_2">
<span class="manage-p-t">10-01-18</span>
</td>
<td width="150">
ddddddddd
</td>
</tr>
<tr onmousedown="return productMouseDown(3)">
<td width="150">
¥<input type="checkbox" value="" class="w50" id="price_3">
<span class="manage-p-t">10-01-18</span>
</td>
<td width="150">
ddddddddd
</td>
</tr>
</table>
</body>
</html>
...全文
1734 11 打赏 收藏 举报
写回复
11 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
浴火_凤凰 2010-01-19
  • 打赏
  • 举报
回复
使用FF跟踪一下就明白了
nta5107179 2010-01-19
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 duwa789 的回复:]
猜测:也许楼主希望点击整行都可以响应,如果只在td的话,那么行中空白部分点击就无效了
[/Quote]
这样也可以
<html>
<head>
</head>
<body>
<table>
<tr>
<td width="150">
<input type="checkbox" value="" class="w50" id="price_1"><label for="price_1">sadasdasdasdsadasdas</label>
</td>
</tr>
</table>
</body>
</html>
nabber 2010-01-19
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 humanblue 的回复:]
引用 5 楼 nabber 的回复:
因为当触发鼠标事件的时候,tr和其子控件CheckBox同时都触发了mousedown事件,在tr中虽然设置为了选中状态,但是在checkbox中又被修改回去了。

你可以看下javascript事件的冒泡机制,然后根据你的需求在来实现。

举例,如果你在checkbox中加入如下代码,
onmousedown="event.cancelBubble = true;"
此时,便不会触发tr的checkbox的事件。


我明白了,实际上是先发生的tr上的onmousedown事件,然后我去点复选框,结果复选框被修改回去了
[/Quote]

恩,结贴吧,等着接分呢啊
humanblue 2010-01-19
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 nabber 的回复:]
因为当触发鼠标事件的时候,tr和其子控件CheckBox同时都触发了mousedown事件,在tr中虽然设置为了选中状态,但是在checkbox中又被修改回去了。

你可以看下javascript事件的冒泡机制,然后根据你的需求在来实现。

举例,如果你在checkbox中加入如下代码,
onmousedown="event.cancelBubble = true;"
此时,便不会触发tr的checkbox的事件。
[/Quote]

我明白了,实际上是先发生的tr上的onmousedown事件,然后我去点复选框,结果复选框被修改回去了
humanblue 2010-01-19
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 vbyzc 的回复:]
因为你这个复选框也是在这个TR上
所以你点击复选框,把复选框改变
但同时调用了TR上的那个函数
所以就等于没有改变
[/Quote]

var productMouseDown = function(id)
{
if (document.getElementById('price_' + id).checked == false) {
document.getElementById('price_' + id).checked = true;
}
}

可是我这个函数有判断啊,当复选框没有选择的时候才去选择

就是我去点那个复选框,不管属于谁的子集,都不应该出现选不上的情况的说?

很意外的是,我在这个函数里加一个alert,就没有烦恼了?

var productMouseDown = function(id)
{
alert(1);
if (document.getElementById('price_' + id).checked == false) {
document.getElementById('price_' + id).checked = true;
}
}
mzsq39 2010-01-19
  • 打赏
  • 举报
回复
因为你是给TR添加的点击事件,而不是给复选框添加的事件。
我试了移到复选框上也不行,思考中。。。
nabber 2010-01-19
  • 打赏
  • 举报
回复
因为当触发鼠标事件的时候,tr和其子控件CheckBox同时都触发了mousedown事件,在tr中虽然设置为了选中状态,但是在checkbox中又被修改回去了。

你可以看下javascript事件的冒泡机制,然后根据你的需求在来实现。

举例,如果你在checkbox中加入如下代码,
onmousedown="event.cancelBubble = true;"
此时,便不会触发tr的checkbox的事件。
duwa789 2010-01-19
  • 打赏
  • 举报
回复
猜测:也许楼主希望点击整行都可以响应,如果只在td的话,那么行中空白部分点击就无效了
nta5107179 2010-01-19
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 vbyzc 的回复:]
因为你这个复选框也是在这个TR上
所以你点击复选框,把复选框改变
但同时调用了TR上的那个函数
所以就等于没有改变
[/Quote]
正解,可以这样写
<html>
<head>
<script type="text/javascript">
// 产品管理鼠标事件
var productMouseDown = function(id)
{
if (document.getElementById('price_' + id).checked == false) {
document.getElementById('price_' + id).checked = true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td width="150">
¥ <input type="checkbox" value="" class="w50" id="price_1">

</td>
<td width="150" onmousedown="return productMouseDown(1)"><span class="manage-p-t">10-01-18 </span>
ddddddddd
</td>
</tr>
</table>
</body>
</html>
vbyzc 2010-01-19
  • 打赏
  • 举报
回复
因为你这个复选框也是在这个TR上
所以你点击复选框,把复选框改变
但同时调用了TR上的那个函数
所以就等于没有改变
duwa789 2010-01-19
  • 打赏
  • 举报
回复
给checkbox也加一个onclick吧。

<script type="text/javascript">
// 产品管理鼠标事件
var productMouseDown = function(id) {
var chk = document.getElementById('price_' + id);
chk.checked = !chk.checked;
}
</script>
<input type="checkbox" value="" class="w50" id="price_1" onclick="productMouseDown(1);" >
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2010-01-19 10:22
社区公告
暂无公告