複選框跨度跨度的onclick裏面..檢查輸入.. jQuery的遞歸問題

此代碼將導致一個遞歸行爲..複選框跨度跨度的onclick裏面..檢查輸入.. jQuery的遞歸問題

我希望能夠點擊文本跨度選中/取消孩子的輸入和觸發子輸入的點擊事件。

 <span class="RedHover"> 
      <input type="checkbox" name="chkShowBusn" id="chkShowBusn" tabindex="9" />Business 
     </span> 



$('.RedHover').click(
     function (e) { 
      try { 
       $(this).children('input').trigger('click'); 
       e.stopPropagation(); 
       e.preventDefault(); 
       console.log('here'); 
      } catch (e) { 
       //handle no click event.alert 
       console.log(e.description); 
      } 
     } 
    );

來源

2011-06-23 cwfontan

的問題是，該事件觸發的input元件上然後冒泡並在span被處理。這發生在原始事件和您以編程方式觸發的事件上。

的解決方案可能是檢查，看看是否該事件源於一個input元素上，而不是來處理它，如果它做的事：

$('.RedHover').click(
    function (e) { 
     if (e.target.nodeName.toLowerCase() !== 'input') { 
      $(this).children('input').trigger('click'); 
      e.stopPropagation(); 
      e.preventDefault(); 
      console.log('here'); 
     } 
    } 
);

的try/catch是不必要的，jQuery將確保該事件對象始終存在並且有你使用的方法。

根據您的預期行爲，調用stopPropgation和preventDefault可能是不必要的。

由於span只有一個孩子，你可以這樣做另一種方式。如果this（該事件被處理的元素，總是span）是一樣的e.target（產生事件的元素，無論是span或input），你可以繼續：

$('.RedHover').click(
    function (e) { 
     if (this === e.target) { 
      $(this).children('input').trigger('click'); 
      e.stopPropagation(); 
      e.preventDefault(); 
      console.log('here'); 
     } 
    } 
);

注意，這比檢查nodeName要穩定得多：如果您將來更改了HTML，則可能會破壞此代碼。

來源

2011-06-23 19:20:37 lonesomeday

這將工作..謝謝,, – cwfontan

@cwfontan你應該接受答案然後:) –

<input type="checkbox" name="chkShowBusn" id="chkShowBusn" tabindex="9" /> 
<label for="chkShowBusn">Business</label>

而且你甚至不需要jQuery的...

來源

2011-06-23 19:21:27 kei

+1爲使用HTML元素的預期目的 – Mutt

您可以停止傳播的複選框的點擊，像這樣

$('input[type=checkbox]').click(function(e){ 
    e.stopPropagation(); 
       e.preventDefault(); 
});

檢查這個jsfiddle

來源

2011-06-23 19:22:45

我有類似的問題，並發現這是解決方案。

HTML

<span for="chkCheckbox"> 
    <input id="chkCheckbox" type="checkbox" /> 
    <label for="chkCheckbox">My Checkbox Label</label> 
</span>

的Javascript（擴展到jQuery是容易的，我不包括它，因爲它是由@lonesomeday回答，我總是喜歡在Java腳本使用第三方庫）

var checkboxSpans = document.querySelectorAll("span[for]"); 

for (var i = 0; i < checkboxSpans.length; i++) { 
    var forCheckbox = checkboxSpans[i].getAttribute("for"); 
    forCheckbox = document.getElementById(forCheckbox); 

    if (forCheckbox != null) { 
     checkboxSpans[i].onclick = function (chk) { 
      return function (e) { 
       if (this === e.target) { 
        e.stopPropagation(); 
        e.preventDefault(); 
        if (chk.checked != true) { 
         chk.checked = true; 
        } else { 
         chk.checked = false; 
        } 
       } 
      } 
     }(forCheckbox); 
    } 
}

這樣，您可以像使用標籤一樣使用它。這實際上可以添加到任何類型的元素。

這是從@lonesomeday提供的答案擴展

來源

2017-05-31 14:18:00 Marius

複選框跨度跨度的onclick裏面..檢查輸入.. jQuery的遞歸問題

回答

相關問題