如何在TR元素上允许onClick事件但在复选框中阻止该事件? 复选框是表格中TR的TD的子项。
我在这个问题上做的是在所有TD上添加onClick,但不在复选框的TD中添加。
这个问题有更好的方法吗?
<tr key={item._id} id={item._id} className={(item.status == "unread")? "unread":""}>
<td className="inbox-small-cells">
<input type="checkbox" className="mail-checkbox" />
</td>
<td className="view-message dont-show" onClick={this.viewMsg.bind(this,item.sender)}>{item.sender} {(item.category.length > 0)?
<span className="label label-info pull-right">{item.category}</span>:""}</td>
<td className="view-message " onClick={this.viewMsg.bind(this,item.sender)}>{item.subject.trunc(40)}</td>
<td className="view-message inbox-small-cells" onClick={this.viewMsg.bind(this,item.sender)}>{(item.attachments.length > 0) ? <i className="fa fa-paperclip"></i> : ""}</td>
<td className="view-message text-right" onClick={this.viewMsg.bind(this,item.sender)}>{item.createdAt}</td>
</tr>
答案 0 :(得分:1)
像所有人已经说过event.stopPropagation()
。我们还可以使用CSS属性pointer-events:none
或属性disabled:true
。以下代码段包含2个使用.css()
和.attr()
<强>段强>
// Option #1
$('.mail-checkbox1').css('pointer-events', 'none');
// Option #2
$('.mail-checkbox2').attr('disabled', true);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="inbox-small-cells">
<label>Control #0 (Normal test case)</label>
<input type="checkbox" class="mail-checkbox0">
<br/>
<label>Option #1 (pointer-events:none)</label>
<input type="checkbox" class="mail-checkbox1">
<br/>
<label>Option #2 (disabled: true)</label>
<input type="checkbox" class="mail-checkbox2">
<br/>
</div>
</section>
&#13;
答案 1 :(得分:0)
您可以使用event.stopPropagation()
调用tds / checkboxes将事件传播到dom树中的父项。
改为:
<tr key={item._id} id={item._id} onClick={this.viewMsg.bind(this,item.sender)} className={(item.status == "unread")? "unread":""}>
<td className="inbox-small-cells" onClick={this.stopEventProp(event)}>
<input type="checkbox" className="mail-checkbox" />
</td>
<td className="view-message dont-show">{item.sender} {(item.category.length > 0)?
<span className="label label-info pull-right">{item.category}</span>:""}</td>
<td className="view-message ">{item.subject.trunc(40)}</td>
<td className="view-message inbox-small-cells">{(item.attachments.length > 0) ? <i className="fa fa-paperclip"></i> : ""}</td>
<td className="view-message text-right">{item.createdAt}</td>
</tr>
现在你必须把这个方法放在你的班级中:
stopEventProp(e){
e.stopPropagation();
}