<tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');"> <td onclick=""><input type="checkbox" value="{{item[1]}}" name="id"></td>这样还是会触发onclick事件怎么办
时间: 2023-07-06 19:13:21 浏览: 198
如果你想阻止点击事件的触发,可以在onclick事件中返回false或者调用事件对象的preventDefault()方法来阻止默认行为。你可以尝试将onclick事件改为以下代码:
```
<tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}'); return false;">
<td onclick=""><input type="checkbox" value="{{item[1]}}" name="id"></td>
</tr>
```
或者:
```
<tr onclick="event.preventDefault(); goToLink('/show_tui?tuihuodanhao={{item[1]}}');">
<td onclick=""><input type="checkbox" value="{{item[1]}}" name="id"></td>
</tr>
```
这样就可以阻止点击事件的默认行为了。
相关问题
<tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');"> <td id="cell1"><input type="checkbox" value="{{item[1]}}" name="id"></td> <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script>错在哪里
这段代码存在一个逻辑错误,即在点击表格中的某一行时,会先执行 `goToLink` 函数跳转到对应的页面,然后再执行 `cell.onclick = null` 将该行的点击事件清空。这会导致无法再次点击该行,因为点击事件已经被清空了。正确的方式是将 `cell.onclick = null` 放在 `goToLink` 函数里面,即在跳转页面之前先清空点击事件,这样就可以正常点击了。修改后的代码如下所示:
```
<script>
function goToLink(link) {
var cell = document.getElementById("cell1");
cell.onclick = null;
window.location = link;
}
</script>
<table class="tab_1">
<tr>
<td><input type="checkbox" id="select-all"></td>
<td>录入时间</td>
<td>退货单号</td>
<td>录入人</td>
<td>备注</td>
<td>状态</td>
<td>日志</td>
</tr>
{%for item in data%}
<tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');">
<td id="cell1"><input type="checkbox" value="{{item[1]}}" name="id"></td>
<td>{{item[0]}}</td>
<td><a href="/do_chawuliu2?danhao={{item[1]}}">{{item[1]}}</a></td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>{% if item[4] is none %}{% else %}{{item[4]}}{% endif %}</td>
<td>日志</td>
</tr>
{%endfor%}
</table>
```
<table class="tab_1"> <tr> <td><input type="checkbox" id="select-all"></td> <td>录入时间</td> <td>退货单号</td> <td>录入人</td> <td>备注</td> <td>状态</td> <td>日志</td> </tr> {%for item in data%} <tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');"> <td id="cell1"><input type="checkbox" value="{{item[1]}}" name="id"></td> <td>{{item[0]}}</td> <td><a href="/do_chawuliu2?danhao={{item[1]}}">{{item[1]}}</a></td> <td>{{item[2]}}</td> <td>{{item[3]}}</td> <td>{% if item[4] is none %}{% else %}{{item[4]}}{% endif %}</td> <td >日志</td> </tr> {%endfor%} </table> <script> function goToLink(link) { window.location = link; } </script> <script> var cell = document.getElementById("cell1"); cell.onclick = null; </script> cell1不起作用
问题可能在于您的JavaScript代码中的位置。在您的示例代码中,您正在尝试使用JavaScript删除单元格中的onclick属性,但是该代码位于HTML表格之后。由于JavaScript代码在HTML代码之后加载和执行,所以当您尝试删除onclick属性时,该单元格可能还没有被加载到页面上,因此代码不起作用。
要解决这个问题,您应该将JavaScript代码放在HTML表格之前,或者在页面加载时使用window.onload事件来确保表格和单元格已经加载到页面上。以下是一个示例代码:
```
<script>
window.onload = function() {
var cell = document.getElementById("cell1");
cell.onclick = null;
}
</script>
<table class="tab_1">
<tr>
<td><input type="checkbox" id="select-all"></td>
<td>录入时间</td>
<td>退货单号</td>
<td>录入人</td>
<td>备注</td>
<td>状态</td>
<td>日志</td>
</tr>
{% for item in data %}
<tr onclick="goToLink('/show_tui?tuihuodanhao={{item[1]}}');">
<td id="cell1"><input type="checkbox" value="{{item[1]}}" name="id"></td>
<td>{{item[0]}}</td>
<td><a href="/do_chawuliu2?danhao={{item[1]}}">{{item[1]}}</a></td>
<td>{{item[2]}}</td>
<td>{{item[3]}}</td>
<td>{% if item[4] is none %}{% else %}{{item[4]}}{% endif %}</td>
<td>日志</td>
</tr>
{% endfor %}
</table>
```
在这个例子中,我们将JavaScript代码放在了window.onload事件处理程序中,以确保表格和单元格已经被加载到页面上。现在,当页面加载完成时,JavaScript代码会找到ID为“cell1”的单元格,并将其onclick属性设置为null,从而删除任何之前定义的onclick事件处理程序。
阅读全文