Question

我有这个收件箱或邮件，我需要使用复选框标记多个删除。问题是当我单击复选框时，它总是转到方法read（），因为标签内部有onclick。我想要的只是简单的标记。请参阅以下代码：

@foreach ($messages as $message)    
  <tr onclick="document.location='{{route('account.message.read', array($message->id))}}'">
     <td> <input type="checkbox" name="msg" value="{{$message->id}}"></td>
     <td><strong>{{Str::words($message->subject, 5, '...')}}</strong> {{Str::words($message->message, 20, '...')}}</td>
  </tr>
@endforeach

现在如何在不进入该方法的情况下标记每一行？我是新手btw。

Answer 1

您只需要将处理程序附加到checkbox并使用stopPropagation冒泡到树中，请参阅下面的示例：

<强> HTML

假设我们的表行包含onclick内嵌javascript，其中包含input：

<table>
  <tr onclick="return alert('Hai')">
    <td>
        <input type="checkbox" />Click Me
    </td>
  </tr>
<table>

这里是处理程序：

$('input').click(function(e){
  // normally if we removed this line of code
  // alert will getting called as checkbox is checked/unchecked
  // was inside table rows
  // but with this propagation, we disabled it 
  // from bubbling up into tree
  e.stopPropagation();
});

DEMO

Answer 2

你可以将onclick放在标签内，不包括复选框单元格

否则你可以在捕获click事件时调用一个实际的onclick函数，并检查x是否大于50px！

＆＃13;

<script type="text/javascript">
document.getElementById('emailRow1').addEventListener("click",function(e){
	var x=e.pageX-this.offsetLeft;
	if(x>50){
		rowClicked();
	}
	},true);
</script>

＆＃13;

<table><tbody><tr id='emailRow1'><td style="width:50px;">This area wont trigger onclick</td><td>I trigger onclick</td><td>i trigger onclick</td>

＆＃13;

然后，您可以在对象上设置自定义参数，并使用this.customPropertyName调用它们以确定单击了哪一行！希望这有帮助

使用复选框标记要删除的行

2 个答案: