标签: preventdefault

我在文档的touchstart上使用preventDefault()以防止在页面上滚动.不幸的是,这可以防止太多 用户无法再将焦点放在输入上(并打开软键盘).使用jQuery focus(),我可以将焦点放在touchstart上的输入上.这会在iOS上打开软键盘(大部分时间),但从不在Android上打开.

背景:

我有一个网页,我想尽可能多的移动应用程序.我只关心Android和iOS,但任何形式因素.我首先使页面中的内容与屏幕大小完全相同.这很好,直到用户将手指放在页面上.我需要阻止用户滚动.以下代码实现了这一点,但在两个操作系统上的方式略有不同.

$(document).on('touchstart', function(e) {
    e.preventDefault();
});

在iOS上,这会阻止弹性滚动:用户可以通过尝试滚动页面来显示网页后面的纹理.该功能对于常规网页来说很不错,但在我的情况下它会降低用户体验.

在Android上,防止我用来隐藏地址栏的方便黑客的启示.Android浏览器以地址栏可见开头,但当用户向下滚动页面时,它会消失.要以编程方式强制浏览器隐藏地址栏,只需将此行代码添加到您在load时调用的函数中.

$('html, body').scrollTop(1);

这是告诉Android浏览器我们已经滚动的hacky(但也是唯一的)方法,并且不再需要地址栏.

如果没有文件上的preventDefault,Android浏览器将允许滚动并显示地址栏.

因此,两个操作系统都有充分的理由在文档的每个touchstart上调用preventDefault(),但它可以防止太多.点击输入字段不起作用.使用jQuery focus()调用可以提供帮助,但只能打开iOS上的软键盘,而不是Android.

$('input').on('touchstart', function() {
    $(this).focus();
});

如何阻止页面滚动,但使用浏览器本机功能将焦点放在输入字段上？

注意:此代码

$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

是有缺陷的,因为只要初始触摸源自输入字段内,用户仍然可以滚动页面.

我在 React 组件中有以下函数，该函数在单击链接时运行：

onClick(e, { name }) {
    e.stopPropagation();

    const doIt = await checkSomething();

    if (doIt) {
        e.preventDefault();
        doSomethingElse();
    }
}

问题是，到了时间，e.preventDefault()合成事件就被回收了。那么，当需要一些逻辑来计算此决定时以及在回收合成事件之前，如何告诉浏览器在点击链接时不要点击该链接？

我有一个带有输入字段的简单应用程序，它应该在您键入时插入一段预定义的文本。

我的代码如下所示：

<input type="text" bind="@PetitionInput" onkeydown="@PetitionHandleKeyDown" />
@functions
{
    private int _petitionCharStep = 0;
    private string _petition = "This is a dummy text";
    public string PetitionInput { get; set; } = string.Empty;

    void PetitionHandleKeyDown(UIKeyboardEventArgs arg) {
        PetitionInput += _petition[_petitionCharStep];
        _petitionCharStep++;

        Console.WriteLine(PetitionInput);
    }
}

当输入字段有焦点时，我在键盘上按下一个字母，然后它应该将字符串中的第一个字母添加_petition到输入中。当我按下键盘上的任何字母时，它应该在输入字段中输入第二个字母。等等。

我遇到的问题是它还在我在键盘上按下的输入末尾添加了字母。我想防止这种情况发生。

有没有办法Blazor只使用问题代码来解决这个问题？

我这里有一个在线演示。

我有一个产生大量垃圾邮件的表单。我已经完成了所有需要的输入并附上了验证码。这没有任何影响。

我假设机器人正在使用form.submit()，因为某种原因这绕过了我所有的必填字段，也绕过了我的onsubmit="check(e)"

我似乎.submit()无论如何都无法抓住这个事件。有谁知道如何捕捉这个事件并确保它被取消。我希望提交表单的唯一方法是单击提交按钮。

$("#myForm").submit(function(event) {
    console.log("Handler for .submit() called.");

    if (CaptchaInput.value == "") {
        event.preventDefault();
    }
});

我应该.submit()接听电话并阻止表单提交的代码。该功能永远不会被触发。

<form target="hidden_iframe" 
onsubmit="if (CaptchaInput.value == '') { why += '- Please Enter CAPTCHA Code.\n'; alert(why); return false; };return checkform(this)" id="myForm">

使用react-domand 的当前版本@material-ui，我需要stopPropagation和/或preventDefault在很多地方。我从来没有遇到过像本文这样的问题，我猜这不会发生，因为 Material-UI 的工作方式：AFAIK 打开对话框和模态首先获取事件，所以当点击外部时它们总是关闭。

• 我对这个假设是否正确？

• 如果是这样，是否还有情况，我不应该stopPropagation和/或preventDefault？

无论如何，我厌倦了通过这个样板使所有事件处理程序复杂化。我想自动化这个，这可能吗？

更新

我没有提供一个例子，哪里stopPropagation是必要的，因为它无济于事（我们都知道有时需要它，不是吗？）。它发生在我身上好几次，例如，单击 MUI 中的关闭按钮Popover将单击转发到打开弹出窗口的按钮（因此它保持打开状态）。

请注意，问题分为三个部分。如果没有自动化解决方案（我敢打赌，React 本身可以做到），我最好奇的是在使用 MUI 时不应该发生抑制的情况。

我刚刚发现一个流浪者event.preventDefault()正在破坏我的复选框处理onChange程序：

import { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      accepted: false
    }
  }

  changeChecked = (event) => {
    this.setState((state) => ({
      accepted : !state.accepted
    }));
    event.preventDefault(); // <- this very bad
  }

  render() {
    return (
      <input
        type="checkbox" 
        onChange={this.changeChecked}
        checked={this.state.accepted}
      />
    );
  }
}

export default App;

第一次单击时产生的行为是正确更新的状态，但复选框仅在下一次重新渲染时更改为其“选中”外观，例如。第二次点击。

这是为什么？受控组件独立于浏览器事件工作不是重点吗？

有人向我解释这一点肯定会减轻我花费数小时来简化复杂用例的痛苦。谢谢你！

更新：这是一个快速的Codepen 示例，演示了奇怪的行为。我添加了一个“未阻止的复选框”和一个包含已阻止onClick事件的复选框作为比较。onChange请注意，当我单击另一个复选框时，带有阻止的复选框如何将其外观切换为实际状态。

我正试图在我的webapp中嵌入一些键绑定,而我在使用Opera时遇到了困难.我有这个代码:

window.onkeydown = function(e){
  var key = e.keyCode ? e.keyCode : e.charCode ? e.charCode : false;
  if (e.ctrlKey && key === 84) {
    alert("foo");
    e.preventDefault();
    // return false;
  }
}

它就像Firefox和Chrome中的魅力一样,但Opera仍然会打开新标签.同样如此return false;.

我的信息: Opera/9.80 (X11; Linux i686; U; en) Presto/2.7.62 Version/11.00

假设我有这样的HTML:

<div>
    <a href="http://google.com">Google</a>
</div>

我有一个像这样的事件处理程序(假设我有jQuery可用):

$('div').on('click', function(ev) {
    // ...
});

是否可以从该事件处理程序中阻止<a>链接的默认操作？或者为时已晚？(换句话说,我需要在<a>或更低的位置附加一个事件以防止默认的链接操作,或者是否可以在上面的处理程序中停止它).

如上所述,如果解决方案需要,我可以使用jQuery.

我正在尝试编写一种方法来捕获网站菜单上的用户点击,但我希望该过程对用户保持沉默,主要是当用户将鼠标悬停在锚标记上时,它会表现正常(显示链接)包含).我已经尝试过各种方式来做到这一点,我现在几乎都在使用它,我的代码如下:

<div class="selectNode" id="selectNode_1" style="color: rgb(229, 229, 229); background-color: rgb(47, 47, 47); ">
  <a href="http://www.google.com" class="selectAnchor" style="color: rgb(229, 229, 229); ">
    Google
  </a>
  <img class="childImage" src="icon.png">
</div>

在jQuery中,我有:

$(".selectAnchor, .menuAnchor").click(function(event){
    event.stopPropagation();
    console.log(event.target.nodeName);
    //event.preventDefault();

    $.ajax({
      type: 'POST',
      url: 'http://localsite/menuRedirect.php',
      data: {id:0, module:'Module',source:'Source'},
      complete: function(data){
        console.log("DONE");
        return true;
      }
    });
});

链接重定向到所选页面,但ajax代码永远不会完成,因此永远不会注册用户的点击.

我尝试使用event.preventDefault,但无法恢复已取消的事件.

问题的一部分来自额外的功能,比如,大多数用户右键单击锚标签以在新选项卡中打开(或使用控制+单击,或中键单击),并使用类似的东西

<a href="javascript:saveClick(o)">Google</a>

不允许在网站上(出于安全原因).

有什么建议可以做到这一点？

我试图解决jQuery教科书提供的问题.它读起来像这样

"即使没有输入数据也会提交数据,为了解决此问题,您必须停止提交按钮的默认操作.为此,请在文件末尾的if语句中编写事件对象的preventDefault方法,如图10-6所示

注意*这是10-6中的代码,当我将其标记到我的代码末尾时,如本书所暗示的那样对我不起作用.

if (isValid == false) { event.preventDefault(); }

请记住,您用于事件对象的名称必须与用于提交事件处理程序的参数的名称相同.

注意*提交事件处理程序如下所示

    $("#email_form").submit(
    function() {
        var isValid = true;

                      // the script proceeds to validate each text field accordingly                    bla bla bla

现在,再次使用空字段进行测试.这应该在除邮政编码字段之外的每个字段的右侧显示"此字段是必需的".

我的问题是我的preventDefault没有工作,无论我尝试什么,它仍然会提交.

来自文本的一个有趣的注释解释了图10-6可能有所帮助,但我不太明白如下.

"如果isValid变量为false,这里你会看到一个if语句,这意味着一个或多个字段无效.在这种情况下,执行事件对象的preventDefault方法.这个对象被传递给函数for提交事件处理程序作为参数,由此处理程序中的第一行存储在事件变量中.如果在将一个或多个字段提交到服务器时未使用preventDefault方法,则表单将提交给服务器这是它的默认动作."

任何见解将不胜感激.