如何解绑定调用event.preventDefault()的侦听器(使用jQuery)?

时间:2022-08-26 09:13:56

jquery toggle calls preventDefault() by default, so the defaults don't work. you can't click a checkbox, you cant click a link etc etc

默认情况下,jquery切换调用preventDefault(),因此默认情况下不起作用。你不能点击复选框,不能点击链接等等

is it possible to restore the default handler?

是否可以恢复默认处理程序?

15 个解决方案

#1


71  

In my case:

在我的例子中:

$('#some_link').click(function(event){
    event.preventDefault();
});

$('#some_link').unbind('click'); worked as the only method to restore the default action.

$(' # some_link ').unbind(“点击”);作为唯一的方法来恢复默认操作。

As seen over here: https://*.com/a/1673570/211514

如图所示:https://*.com/a/1673570/211514

#2


51  

Its fairly simple

其相当简单

Lets suppose you do something like

让我们假设你做一些类似的事情

document.ontouchmove = function(e){ e.preventDefault(); }

now to revert it to the original situation, do the below...

现在,要将其还原为原始情况,请执行以下操作……

document.ontouchmove = function(e){ return true; }

From this website.

从这个网站。

#3


16  

It is not possible to restore a preventDefault() but what you can do is trick it :)

恢复preventDefault()是不可能的,但是您可以做的就是欺骗它:

<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
   if($(this).hasClass('prevented')){
       e.preventDefault();
       $(this).removeClass('prevented');
   }else{
       $(this).addClass('prevented');
   }
});
</script>

If you want to go a step further you can even use the trigger button to trigger an event.

如果您想更进一步,您甚至可以使用触发按钮触发事件。

#4


10  

function DoPrevent(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Bind:
$(element).on('click', DoPrevent);

// UnBind:
$(element).off('click', DoPrevent);

#5


8  

in some cases* you can initially return false instead of e.preventDefault(), then when you want to restore the default to return true.

在某些情况下,您可以首先返回false而不是e.preventDefault(),然后当您想要恢复默认值时返回true。

*Meaning when you don't mind the event bubbling and you don't use the e.stopPropagation() together with e.preventDefault()

*意思是当您不介意事件冒泡时,您不使用e.stopPropagation()和e.preventDefault()

Also see similar question (also in stack Overflow)

还可以看到类似的问题(也在堆栈溢出中)

or in the case of checkbox you can have something like:

或者在复选框的情况下,你可以有如下内容:

$(element).toggle(function(){
  $(":checkbox").attr('disabled', true);
  },
function(){
   $(":checkbox").removeAttr('disabled');
}) 

#6


8  

You can restore the default action (if it is a HREF follow) by doing this:

通过以下操作,您可以恢复默认操作(如果是HREF follow):

window.location = $(this).attr('href');

窗口。位置= $().attr(“href”);

#7


2  

if it is a link then $(this).unbind("click"); would re-enable the link clicking and the default behavior would be restored.

如果是链接,则$(this).unbind(“单击”);将重新启用单击链接,并恢复默认行为。

I have created a demo JS fiddle to demonstrate how this works:

我已经创建了一个演示JS小提琴来演示这是如何工作的:

Here is the code of the JS fiddle:

以下是JS fiddle的代码:

HTML:

HTML:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a href="http://jquery.com">Default click action is prevented, only on the third click it would be enabled</a>
<div id="log"></div>

Javascript:

Javascript:

<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
  event.preventDefault();

  $( "<div>" )
    .append( "default " + event.type + " prevented "+counter )
    .appendTo( "#log" );

    if(counter == 2)
    {
        $( "<div>" )
    .append( "now enable click" )
    .appendTo( "#log" );

    $(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
    }
    else
    {
        $( "<div>" )
    .append( "still disabled" )
    .appendTo( "#log" );
    }
    counter++;
});
});
</script>

#8


1  

Disable:

禁用:

document.ontouchstart = function(e){ e.preventDefault(); }

Enable:

启用:

document.ontouchstart = function(e){ return true; }

#9


1  

Test this code, I think solve your problem:

测试这个代码,我认为可以解决你的问题:

event.stopPropagation();

Reference

参考

#10


1  

The best way to do this by using namespace. It is a safe and secure way. Here .rb is the namespace which ensures unbind function works on that particular keydown but not on others.

最好的方法是使用命名空间。这是一种安全的方式。这里的.rb是一个名称空间,它确保unbind函数可以在特定的键下操作,但不能在其他键下操作。

$(document).bind('keydown.rb','Ctrl+r',function(e){
            e.stopImmediatePropagation();
            return false;
        });

$(document).unbind('keydown.rb');

ref1: http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/

ref1:http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/

ref2: http://jqfundamentals.com/chapter/events

ref2:http://jqfundamentals.com/chapter/events

#11


0  

I had a problem where I needed the default action only after some custom action (enable otherwise disabled input fields on a form) had concluded. I wrapped the default action (submit()) into an own, recursive function (dosubmit()).

我遇到了一个问题,只有在一些自定义操作(启用窗体上禁用的输入字段)结束之后才需要默认操作。我将默认操作(submit())包装成一个自己的递归函数(dosubmit())。

var prevdef=true;
var dosubmit=function(){
    if(prevdef==true){
        //here we can do something else first//
        prevdef=false;
        dosubmit();
    }
    else{
        $(this).submit();//which was the default action
    }
};

$('input#somebutton').click(function(){dosubmit()});

#12


0  

Use a boolean:

用一个布尔值:

let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) { 
    if (prevent_touch) event.preventDefault(); 
}

I use this in a Progressive Web App to prevent scrolling/zooming on some 'pages' while allowing on others.

我在一个循序渐进的Web应用程序中使用这个功能,以防止在某些“页面”上滚动/缩放,同时允许其他“页面”。

#13


0  

You can set to form 2 classes. After you set your JS script to one of them, when you want to disable your script, you just delete the class with binded script from this form.

您可以设置为form 2类。在您将JS脚本设置为其中一个之后,当您想要禁用脚本时,您只需从这个表单中删除具有绑定脚本的类。

HTML:

HTML:

<form class="form-create-container form-create"> </form>   

JS

JS

$(document).on('submit', '.form-create', function(){ 
..... ..... ..... 
$('.form-create-container').removeClass('form-create').submit();

});

#14


-3  

$('#my_elementtt').click(function(event){
    trigger('click');
});

#15


-9  

I'm not sure you're what you mean: but here's a solution for a similar (and possibly the same) problem...

我不确定你是什么意思:但这里有一个类似的(可能是同样的)问题的解决方案……

I often use preventDefault() to intercept items. However: it's not the only method of interception... often you may just want a "question" following which behaviour continues as before, or stops. In a recent case I used the following solution:

我经常使用preventDefault()来拦截条目。然而:这并不是唯一的拦截方法……通常,你可能只是想要一个“问题”,接下来的行为是继续还是停止。在最近的一个案例中,我使用了以下解决方案:

$("#content").on('click', '#replace', (function(event){ return confirm('Are you sure you want to do that?') }));

$(" #内容”)。on('click', '#replace', (function(event){return confirm('Are you sure you want to do that?')});

Basically, the "prevent default" is meant to intercept and do something else: the "confirm" is designed for use in ... well - confirming!

基本上,“防止默认”是指拦截和做其他事情:“确认”是为用于……——确认好!

#1


71  

In my case:

在我的例子中:

$('#some_link').click(function(event){
    event.preventDefault();
});

$('#some_link').unbind('click'); worked as the only method to restore the default action.

$(' # some_link ').unbind(“点击”);作为唯一的方法来恢复默认操作。

As seen over here: https://*.com/a/1673570/211514

如图所示:https://*.com/a/1673570/211514

#2


51  

Its fairly simple

其相当简单

Lets suppose you do something like

让我们假设你做一些类似的事情

document.ontouchmove = function(e){ e.preventDefault(); }

now to revert it to the original situation, do the below...

现在,要将其还原为原始情况,请执行以下操作……

document.ontouchmove = function(e){ return true; }

From this website.

从这个网站。

#3


16  

It is not possible to restore a preventDefault() but what you can do is trick it :)

恢复preventDefault()是不可能的,但是您可以做的就是欺骗它:

<div id="t1">Toggle</div>
<script type="javascript">
$('#t1').click(function (e){
   if($(this).hasClass('prevented')){
       e.preventDefault();
       $(this).removeClass('prevented');
   }else{
       $(this).addClass('prevented');
   }
});
</script>

If you want to go a step further you can even use the trigger button to trigger an event.

如果您想更进一步,您甚至可以使用触发按钮触发事件。

#4


10  

function DoPrevent(e) {
  e.preventDefault();
  e.stopPropagation();
}

// Bind:
$(element).on('click', DoPrevent);

// UnBind:
$(element).off('click', DoPrevent);

#5


8  

in some cases* you can initially return false instead of e.preventDefault(), then when you want to restore the default to return true.

在某些情况下,您可以首先返回false而不是e.preventDefault(),然后当您想要恢复默认值时返回true。

*Meaning when you don't mind the event bubbling and you don't use the e.stopPropagation() together with e.preventDefault()

*意思是当您不介意事件冒泡时,您不使用e.stopPropagation()和e.preventDefault()

Also see similar question (also in stack Overflow)

还可以看到类似的问题(也在堆栈溢出中)

or in the case of checkbox you can have something like:

或者在复选框的情况下,你可以有如下内容:

$(element).toggle(function(){
  $(":checkbox").attr('disabled', true);
  },
function(){
   $(":checkbox").removeAttr('disabled');
}) 

#6


8  

You can restore the default action (if it is a HREF follow) by doing this:

通过以下操作,您可以恢复默认操作(如果是HREF follow):

window.location = $(this).attr('href');

窗口。位置= $().attr(“href”);

#7


2  

if it is a link then $(this).unbind("click"); would re-enable the link clicking and the default behavior would be restored.

如果是链接,则$(this).unbind(“单击”);将重新启用单击链接,并恢复默认行为。

I have created a demo JS fiddle to demonstrate how this works:

我已经创建了一个演示JS小提琴来演示这是如何工作的:

Here is the code of the JS fiddle:

以下是JS fiddle的代码:

HTML:

HTML:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<a href="http://jquery.com">Default click action is prevented, only on the third click it would be enabled</a>
<div id="log"></div>

Javascript:

Javascript:

<script>
var counter = 1;
$(document).ready(function(){
$( "a" ).click(function( event ) {
  event.preventDefault();

  $( "<div>" )
    .append( "default " + event.type + " prevented "+counter )
    .appendTo( "#log" );

    if(counter == 2)
    {
        $( "<div>" )
    .append( "now enable click" )
    .appendTo( "#log" );

    $(this).unbind("click");//-----this code unbinds the e.preventDefault() and restores the link clicking behavior
    }
    else
    {
        $( "<div>" )
    .append( "still disabled" )
    .appendTo( "#log" );
    }
    counter++;
});
});
</script>

#8


1  

Disable:

禁用:

document.ontouchstart = function(e){ e.preventDefault(); }

Enable:

启用:

document.ontouchstart = function(e){ return true; }

#9


1  

Test this code, I think solve your problem:

测试这个代码,我认为可以解决你的问题:

event.stopPropagation();

Reference

参考

#10


1  

The best way to do this by using namespace. It is a safe and secure way. Here .rb is the namespace which ensures unbind function works on that particular keydown but not on others.

最好的方法是使用命名空间。这是一种安全的方式。这里的.rb是一个名称空间,它确保unbind函数可以在特定的键下操作,但不能在其他键下操作。

$(document).bind('keydown.rb','Ctrl+r',function(e){
            e.stopImmediatePropagation();
            return false;
        });

$(document).unbind('keydown.rb');

ref1: http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/

ref1:http://idodev.co.uk/2014/01/safely-binding-to-events-using-namespaces-in-jquery/

ref2: http://jqfundamentals.com/chapter/events

ref2:http://jqfundamentals.com/chapter/events

#11


0  

I had a problem where I needed the default action only after some custom action (enable otherwise disabled input fields on a form) had concluded. I wrapped the default action (submit()) into an own, recursive function (dosubmit()).

我遇到了一个问题,只有在一些自定义操作(启用窗体上禁用的输入字段)结束之后才需要默认操作。我将默认操作(submit())包装成一个自己的递归函数(dosubmit())。

var prevdef=true;
var dosubmit=function(){
    if(prevdef==true){
        //here we can do something else first//
        prevdef=false;
        dosubmit();
    }
    else{
        $(this).submit();//which was the default action
    }
};

$('input#somebutton').click(function(){dosubmit()});

#12


0  

Use a boolean:

用一个布尔值:

let prevent_touch = true;
document.documentElement.addEventListener('touchmove', touchMove, false);
function touchMove(event) { 
    if (prevent_touch) event.preventDefault(); 
}

I use this in a Progressive Web App to prevent scrolling/zooming on some 'pages' while allowing on others.

我在一个循序渐进的Web应用程序中使用这个功能,以防止在某些“页面”上滚动/缩放,同时允许其他“页面”。

#13


0  

You can set to form 2 classes. After you set your JS script to one of them, when you want to disable your script, you just delete the class with binded script from this form.

您可以设置为form 2类。在您将JS脚本设置为其中一个之后,当您想要禁用脚本时,您只需从这个表单中删除具有绑定脚本的类。

HTML:

HTML:

<form class="form-create-container form-create"> </form>   

JS

JS

$(document).on('submit', '.form-create', function(){ 
..... ..... ..... 
$('.form-create-container').removeClass('form-create').submit();

});

#14


-3  

$('#my_elementtt').click(function(event){
    trigger('click');
});

#15


-9  

I'm not sure you're what you mean: but here's a solution for a similar (and possibly the same) problem...

我不确定你是什么意思:但这里有一个类似的(可能是同样的)问题的解决方案……

I often use preventDefault() to intercept items. However: it's not the only method of interception... often you may just want a "question" following which behaviour continues as before, or stops. In a recent case I used the following solution:

我经常使用preventDefault()来拦截条目。然而:这并不是唯一的拦截方法……通常,你可能只是想要一个“问题”,接下来的行为是继续还是停止。在最近的一个案例中,我使用了以下解决方案:

$("#content").on('click', '#replace', (function(event){ return confirm('Are you sure you want to do that?') }));

$(" #内容”)。on('click', '#replace', (function(event){return confirm('Are you sure you want to do that?')});

Basically, the "prevent default" is meant to intercept and do something else: the "confirm" is designed for use in ... well - confirming!

基本上,“防止默认”是指拦截和做其他事情:“确认”是为用于……——确认好!