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

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>

...全文

1908 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

浴火_凤凰 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);" >