我加了一个鼠标事件,就是当鼠标在<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>
<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>
// 产品管理鼠标事件
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);" >
所以你点击复选框,把复选框改变
但同时调用了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>
<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>
onmousedown="event.cancelBubble = true;"
此时,便不会触发tr的checkbox的事件。
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;
}
}
我明白了,实际上是先发生的tr上的onmousedown事件,然后我去点复选框,结果复选框被修改回去了
<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>