Jquery - 在同一輸入上區分「點擊」和「焦點」時使用

我試圖在輸入點擊時觸發輸入事件或如果輸入焦點。Jquery - 在同一輸入上區分「點擊」和「焦點」時使用

我遇到的問題是防止事件發生兩次點擊，顯然，單擊輸入也會將其放在焦點上。我已經把這個非常寬鬆版上jfiddle向您展示了我的意思，代碼如下：

HTML：

<body> 
    <input type="textbox" name="tb1" class="input1"></input> 
    <label> box 1 </label> 
    <input type="textbox" name="tb2" class="input2"></input> 
    <label> box 2 </label> 
</body>

JQuery的

$(function() { 
    $('.input2').click(function() { 
     alert("click"); 
    }); 
    $('.input2').focus(function() { 
     alert("focus"); 
    }); 
});

的jsfiddle：http://jsfiddle.net/XALSn/2/

你會看到，當你選擇輸入2時，你會得到一個警報，但如果你點擊你會得到兩個。理想情況下，對於我的情況，它需要一個警報而忽略另一個。它似乎也沒有真正關注。

在此先感謝您的任何建議。

來源

2014-03-13 Rob Owl

鑑於點擊會將焦點，爲什麼你需要的單擊事件？ – Utkanos

這是做訪問性和人們如何使用形式Utkanos。謝謝。 –

@RobOwl你能不能舉個例子，你仍然需要單擊事件？ –

如何焦點設置標誌，這樣我們就可以火上焦點，而忽略點擊，但後來聽點擊的聚焦元素嗎？合理？查看demo jsFiddle - 如果您專注或點擊未聚焦的.index2，它會觸發焦點事件並忽略點擊。在關注的同時，點擊它會觸發點擊。

我不知道你爲什麼會想這個（我不能想象任何人想要聚焦的元素上點擊任何原因（因爲克拉已經在場上主動），但在這裏你去：

$(function() { 
    $('.input2').on("click focus blur", function(e) { 
     e.stopPropagation(); 
     if(e.type=="click"){ 
      if($(this).data("justfocussed")){ 
       $(this).data("justfocussed",false); 
      } else { 
       //I have been clicked on whilst in focus 
       console.log("click"); 
      } 
     } else if(e.type=="focus"){ 
      //I have been focussed on (either by clicking on whilst blurred or by tabbing to) 
      console.log("focus"); 
      $(this).data("justfocussed",true); 
     } else { 
      //I no longer have focus 
      console.log("blur"); 
      $(this).data("justfocussed",false); 
     } 
    }); 
});

http://jsfiddle.net/XALSn/12/

來源

2014-03-14 09:34:36 Moob

這看起來不錯Moob謝謝，這裏有可以操縱的點擊和焦點之間的明確區別。再次感謝。 –

剛上單擊事件

$(function() { 
    $('.input2').click(function(e) { 
     console.log("click"); 
     e.preventDefault(); 
     e.stopPropagation(); 
    }); 
    $('.input2').focus(function() { 
     console.log("focus"); 
    }); 
});

添加e.preventDefault（）如果我明白你的問題吧，e.prevnetDefault（）將防止瀏覽器自動注重點擊。然後，你可以做點與點擊不同的事情，而不是焦點

來源

2014-03-13 16:34:21 Gisheri

爲什麼downvote？我瞭解你錯了嗎？ – Gisheri

我還沒有在其他瀏覽器上測試過，但在Chrome中至少發生了點擊之前的焦點。 – Moob

我沒有downvote你Gisheri，我以前試過這個無濟於事。 –

這可能不是最好的答案，但這是一種方法。我建議您在輸入時添加製表索引，並在從另一個輸入模糊時觸發焦點事件。

我補充說，這種琴： http://jsfiddle.net/XALSn/9/

$(function() { $('.input2').click(function(e) { alert("click"); e.preventDefault(); }); }); $('input').blur(function(){ $('input').focus(function() { alert("focus"); }); });

來源

2014-03-13 16:34:59 ntgCleaner

如果用戶從不點擊它，該怎麼辦？（也許他們沒有鼠標）他們必須先插入，然後再回來，以便第一次觸發事件。 – Moob

@以任何形式，作爲用戶體驗標準，您應該關注第一個領域。應始終有一個焦點。特別是對於可訪問性網站。 – ntgCleaner

你可以使用我使用非常頻繁的JS

var doSomething = true; 

$(function() { 
    $('.input2').click(function(e) { 
     if (doSomething) { 
     // do something :) 
     }  
     doSomething = false; 
    }); 
    $('.input2').focus(function() { 
     if (doSomething) { 
     // do something :) 
     } 
     doSomething = false; 
    }); 
});

一兩件事，但你必須在改變DoSomething的價值鼠標或foucs等:) :)

來源

2014-03-13 16:37:49

$(function() { 
    var hasFocus = false; 
    $("body") 
    .off() 
    .on({ 
     click : function() 
     { 
      if(!hasFocus) 
      { 
       hasFocus = true; 
       alert("click"); 
      } 
     }, 

     focus : function() 
     { 
      if(!hasFocus) 
      { 
       hasFocus = true; 
       alert("focus"); 
      } 
     } 
    },".input2"); 
});

嘗試設置一個標誌hasF OCUS並採取相應的行動

http://jsfiddle.net/AEVTQ/2/

來源

2014-03-13 16:49:38 alex

Jquery - 在同一輸入上區分「點擊」和「焦點」時使用

回答

相關問題