标签: preventdefault

在osx 10.6.8上使用chrome 15

添加事件监听器时,我发现preventDefault在使用keypress事件时输入,我会遇到mas问题.

看看这里

取消对该行的注释event.preventDefault();,您将看到按键事件停止工作.这是怎么回事？

根据jQuery 文档

从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。false 值也可以作为 function(){ return false; 的简写传递给处理程序。}. 所以， $("a.disabled").on("click", false); 将事件处理程序附加到所有具有“禁用”类的链接，以防止在单击它们时跟踪它们，并阻止事件冒泡。

所以当我创建一个点击事件时：

$('#sidebar').on("click", ".toggle", function() {
    $(this).parents("p").next("ul").toggle(400);
    return false;
});

我希望点击不会注册，因为它没有机会传播.toggle到#sidebar

我想出的唯一解释是，如果允许这种情况发生，它会使该on()功能变得毫无意义，所以在这种情况下它可能会被绕过？

on()就冒泡而言，遵循什么规则？

这是我到目前为止所尝试的:

var preventDefaultFunc = function(e){   
            e.preventDefault();
        }

然后我稍后在点击功能中调用它:

$('.item').click(function(e){

            var $this = $(this);
            var $thisChild = $this.find('.item-content');
            if ( $this.hasClass('big') ) {
                return false;
            }

            $this.on(preventDefaultFunc);
    // make the box bigger and load the article inside it here
});

我是这样做的,所以我可以稍后再关闭它,因为有问题的div需要允许其中的点击一旦变大.

打开/关闭开关不起作用,因为它应该阻止页面加载框内的链接,这样我可以使框更大并用ajax加载文章.请注意,on/off是bind/unbind的jquery 1.7版本.

有什么建议？

我正试图在li选项卡上使用addClass('current').问题是click函数调用load(),它会重置li选项卡上的当前类.如何在访问者点击的li上的load()之后添加addClass()？

我现在的表现如何:

$('div#container ul.tab-nav li').click(function(event) {
   $('div#container').load('index.htm').fadeIn("slow");
   $('div ul.tab-nav li').removeClass('current');
   $(this).addClass('current');
   event.preventDefault();
   return false;
}); 

<ul class="tab-nav">
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
</ul>

我没有编写这段代码,而且我无法弄清楚为什么我在第一时间得到以下错误e.preventDefault().我已经尝试在.click事件处理程序中移动代码,传递给它function(e){},替换它return false,声明它var e = $(this.href)(不要笑,我正在努力学习),我已经检查了返回的值a href,它是返回正确的hash.视频播放,但是当我运行IE调试器时,我收到此错误.有人请告诉我如何正确调试和修复此问题.谢谢

HTML

 <a href="#video1" class="blueBtn modal" style="width:150px;"><span>Watch Video <img width="10" height="17" src="images/bluebtn.png"></span></a></div>

使用Javascript

// FANCY BOX
$("a.modal").click(function(){
    var inline=$(this).attr('href');
    $.fancybox({
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'href'              : inline,
        'onComplete'        : function(){
            $(inline+' .flowPlayer').videoPlayer();
            $.fancybox.center(true);
        },
        'onClosed'          : function(){loc();}
    });
    e.preventDefault();         
});

$(".print").click(function(e){
    window.open("print-docs/"+$(this).parent().attr('id')+".html","print","width=1,height=1");
    e.preventDefault();
});

function loc(){
    var location=window.location.href;
    var replaceHash=location.replace(document.location.hash,"");
    window.location.assign(replaceHash);
}

我终于在其他浏览器中测试我的网站(主要在Chrome中构建).不幸的是,很多东西似乎功能不同.我将从第一个问题开始:在登录时,我有一个JS/jQuery检查以确保用户名和密码匹配,并且在失败时它应该停止提交.

然而,虽然它适用于Chrome和Safari,但在Mozilla和IE中,提交仍在进行中(打到道歉页面,但仍然是我根本看不到的东西).

我已经试过了胶层event.preventDefault()为e.preventDefault()或evt.preventDefault(),但他们没有工作,形式仍然提交(和后两个这使得它,让它在Chrome提交也是).这是我的代码,会喜欢任何想法:

function checkLogin()
{
    // get the variables, execute some other checks (eg, things not blank)

    // run ajax code to determine if pieces match
    $.ajax({
    type: "POST",
    url: "check_login.php", 
    data: {'username': username, 'password': password},
    async: false,
    success: function(result) 
    {
      if (result == 1)
      {
        $('#loginoff').html("Invalid username/password");
        e.preventDefault();
        return false;
      } 
      else
      {
        $('#loginoff').html("");
        return true;
      } 
    }
    });
}

请注意,当用户名和密码不匹配时,该功能肯定会通过并返回1,因为在所有情况下,都会出现"无效的用户名/密码"消息.

此外,如果有人对HTML感兴趣:

<form action="login.php" method="post" onsubmit="return checkLogin()">
<!-- code for inputs, eg …

我有一个简单的表单,带有电话输入和一些电子邮件输入,但是我无法摆脱单击提交按钮时出现的默认浏览器警告消息.

我的CodePen

我试图实现event.preventDefault(); 但它似乎不适用于我的情况.

$('#profile-info-form').unbind('submit').bind("submit", function(event) {
    event.preventDefault();
    console.log('save button clicked');
});

我即时创建的输入字段示例:

var myphone = "<li><label>Cell Phone:</label></li><li><input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' /></li>";

你会如何处理这个问题？

我有一个带有输入字段的下拉菜单来搜索我的li元素.问题是:每当我点击输入字段以放入我的搜索查询时,就会发生点击事件并且下拉菜单会消失.

我在输入字段上尝试了preventDefault,但它没有用.我怎么能阻止这种行为呢？

这是一个Plunker:http://plnkr.co/edit/SlbWZ5Bh62MDKWViUsMr

这是我的标记(它是ng-model ="customerFilter"的输入):

<div class="button">
  <a class="btn btn-large grey dropdown-toggle" data-toggle="dropdown" href="#">
    Organisation
  </a>
  <ul class="dropdown-menu grey" >
    <input type="text" ng-model="customerFilter">
    <li ng-repeat="customer in customers | filter:customerFilter | orderBy:sortorder" ng-click="addCardGrey(customer)">{{ customer.name }}</li>
  </ul>
</div>

非常感谢你提前!

我的页面上有一个文件输入:

<input type="file" id="file-main" style="display:none;" name="file-main">

我有一个标签指向那个输入:

<button class="main-button" id="file-choose-btn"><lable for="file-main">Choose Image</lable></button>

但是当我按下按钮(选择文件)时,表单立即被提交,并尝试执行PHP文件(即表单的"动作").我还没有该文件,因此它返回HTTP 404错误.

基本上,我的问题是,如何在单击(或本例中的按钮)后阻止执行表单.

我尝试使用事件处理程序来阻止事件的默认操作:

document.getElementById("file-choose-btn").onclick = function(e){
            e.preventDefault();
}

但后来我甚至无法选择文件,因为窗口甚至没有打开.

有解决方案吗 谢谢.

我们使用preventDefault方法时有用吗？(在函数的开头和结尾处).我看过的所有教程都在函数结尾处放置了preventDefault,但我认为你要做的第一件事是阻止默认行为.我注意到它可以工作,如果它在函数的开头,它在函数的最后工作:

function calculateResults(e){

    e.preventDefault();
    //UI Vars
    const amount = document.querySelector(`#amount`);
    const interest = document.querySelector(`#interest`);
    const years = document.querySelector(`#years`);
    const monthlyPayment = document.querySelector(`#monthly-payment`);
    const totalPayment = document.querySelector(`#total-payment`);
    const totalInterest =document.querySelector(`#total-interest`);

    const princapal =  parseFloat(amount.value);
    const calculatedInterest = parseFloat(interest.value)/100/12;
    const calculatedPayment = parseFloat(years.value) * 12;

    // compute monthly payments
    const x = Math.pow(1 + calculatedInterest, calculatedPayment);

}

VS

function calculateResults(e){

    //UI Vars
    const amount = document.querySelector(`#amount`);
    const interest = document.querySelector(`#interest`);
    const years = document.querySelector(`#years`);
    const monthlyPayment = document.querySelector(`#monthly-payment`);
    const totalPayment = document.querySelector(`#total-payment`); …