合併幾個事件

我有一個文本字段和一個按鈕。當點擊按鈕或輸入時，應該執行一個函數。合併幾個事件

我的方法是有用的。但是，是否可以合併這兩個功能（click和keypress），以便我只有1個？

$("button").click(function() { 
    getInput(); 
}); 

$("#name").keypress(function(e) { 
    if (e.which == 13) { 
    getInput(); 
    } 
}); 

function getInput() { 
    alert($("#name").val()) 
}

所以我只需要追加這些事件。

Here is a fiddle。

來源

2016-07-22 user1170330

不是真的 - 你已經使實際的工作成爲一個單獨的功能，所以沒有重複的代碼。問題是點擊和按鍵的處理程序是非常不同的，所以你最終會檢查你是否有一個按鍵來檢查哪個鍵。你可以稍微改進'$（「button」）。click（getInput）';. –

您可以監聽多個事件使用它們，或者點擊所包圍的按鈕裏面輸入輸入.on('listOfEvents')

比你只需要一些額外的規則來檢查什麼時候需要運行功能。

$("button, #name").on('click keypress', function(e) { 
 
    if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) { 
 
\t \t getInput(); 
 
    } 
 
}); 
 

 
function getInput() { 
 
    alert($("#name").val()) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="name" /> 
 
<button id="submit"> 
 
    OK 
 
</button>

來源

2016-07-22 13:32:40 Justinas

我是出於好奇，$（「button，#name）.on（'click buttonpress'）將按鈕綁定到按鈕？並單擊到文本框？不認爲事件被不必要地添加 – Kira

@Kira是的，但它是OP請求 – Justinas

function getInput(){ 
 
    return $(".result").text($("input").val()); 
 
} 
 

 
$("form").on("submit", (ev)=>{ 
 
    ev.preventDefault(); 
 
    // handle submission 
 
    getInput(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <input type="text" /> 
 
    <button>ok</button> 
 
</form> 
 
<div class="result"></div>

你可以用你的輸入和按鍵的形式，並聽取該表單上的提交事件。表格可以按提交

HTML

<form action=""> 
    <input type="text" /> 
    <button>ok</button> 
</form>

的Javascript

$("form").on("submit", (ev)=>{ 
    ev.preventDefault(); 
    // handle submission 
    getInput(); 
})

來源

2016-07-22 13:26:24 eltonkamami

@eltonkamami答案是一個想法，我的想法是兩個輸入框和按鈕，這樣提供相同等級：

（不過，這將觸發只要輸入字段改變）

$(".same").bind("click keypress", function() { 
 
    getInput(); 
 
}); 
 

 
function getInput() { 
 
    console.log($("#name").val()) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="name" class="same" /> 
 
<button id="submit" class="same"> 
 
    OK 
 
</button>

合Ë它幫助:)

來源

2016-07-22 13:32:57 Thinker

這是一個有趣的想法，但它不檢測輸入事件。 – user1170330

@ user1170330輸入事件正在爲我工作 – Thinker

是的，每個鍵都會觸發此功能。但是你從不明確地檢查回車鍵。就像'if（e.which == 13）'。 – user1170330

$("button,#name").on("click keypress",function(e) { 
    //alert($(e.currentTarget).html()); 
    if (e.which == 13) { 
    getInput(); 
    }else if(event.type == 'click'){ 
    getInput(); 
    } 
}); 

function getInput() { 
    alert($("#name").val()) 
}

來源

2016-07-22 13:41:25 sarath

你能解釋一下你做了什麼嗎？ – depperm

我們可以通過e.key或e.type參數

試試這個區分點擊按鍵，

var getInput = function(e) {  
 
    if((e.which & e.which==13) || !e.key) 
 
    //e.key is a parameter for keypress event and not for click 
 
    alert($("#name").val()) 
 
} 
 

 
$("button").click(getInput); 
 

 
$("#name").keypress(getInput);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<input type="text" id="name" class="same" /> 
 
<button id="submit" class="same"> 
 
Click 
 
</button>

來源

2016-07-22 13:42:48 Kira

合併幾個事件

回答

相關問題