允許TR元素上的onclick事件，但阻止複選框中的事件

Question

如何允許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> 

Answer 1

像其他人已經指出event.stopPropagation()。我們也可以使用CSS屬性pointer-events:none或屬性disabled:true。下面的代碼片段具有使用.css()和.attr()

代碼片段

// Option #1 
 
$('.mail-checkbox1').css('pointer-events', 'none'); 
 

 

 
// Option #2 
 
$('.mail-checkbox2').attr('disabled', true);

<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>

Answer 2

您可以使用TDS /複選框event.stopPropagation()調用傳播事件給其父母在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(); 
}