停止元素的所有事件

Question

我想停止 input, select, textarea 的所有事件。 如果單擊或輸入框的焦點上有事件，則它不應該起作用。 當我點擊輸入框時，不應觸發任何事件。 不應關注輸入或文本區域。 如果我點擊選擇，那么它不應該打開（不要禁用它，使用 preventDefault()），我還需要一個按鈕，點擊該按鈕后，我們停止的事件應該再次工作。

First:
<input class='test1' type='text' value='1' /></br></br>

Second:
<select class='test2'>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select></br></br>

Third:
<textarea class='test3'>Hi all</textarea></br></br>

Fourth:
<input class='test4' type='text' value='4' />

$(".test1").on("click", function (e) {
    alert('click on test1');
});

$(".test2").on("click", function (e) {
    alert('click on test2');
});

$(".test3").on("click", function (e) {
    alert('click on test3');
});

$(".test4").on("click", function (e) {
    alert('click on test4');
});

$("input").on("click", function (e) {
    alert('click on input');
});

$("input").bind("click", function (e) {
    alert('click on input (bind)');
});

$("input").hover(function (e) {
    alert('hover on input');
});

$("input").on("focus", function (e) {
    alert('focus on input');
});

小提琴

Answer 1

你可以使用這樣的東西

var enabled = false;
$('input, textarea, select ').on('mousedown click focus', function(e) {
    if(!enabled){
        e.preventDefault();
        this.blur();
        window.focus();
    }
});
$("#enable-btn").on("click", function(e){
    enabled = !enabled;
    var text = $(this).val();
    $(this).val(text == "Enable" ? "Disable" : "Enable");
});

JsFiddle 示例

---

評論后編輯

為了防止附加到事件的其他功能，您需要檢查狀態是否被禁用。 這里有更新的示例。

HTML

<input type="text" id="id1" />
<select>
    <option val="0">Val 0</option>
    <option val="1">Val 1</option>
    <option val="2">Val 2</option>
</select>
 <textarea rows="4" cols="50"></textarea> 
<input type="button" id="enable-btn" value="Enable" />
<div id="log"></div> 

腳本

var enabled = false;
$('input, textarea, select ').on('mousedown click focus', function(e) {
    if(!enabled){
        e.preventDefault();
        this.blur();
        window.focus();
    }
});
$("#enable-btn").on("click", function(e){
    enabled = !enabled;
    var text = $(this).val();
    $(this).val(text == "Enable" ? "Disable" : "Enable");
});

$("select").on("click",function(e){
    if (!enabled){       
        e.preventDefault();
        return false;
    }
    $("#log").html("Select clicked");    
});
$("input").on("click",function(e){
    if (!enabled){       
        e.preventDefault();
        return false;
    }
    $("#log").html("Input clicked");    
});

更新了 JsFiddle 演示