标签: preventdefault

我正在寻找一种方法来.preventDefault()进行转换,然后允许默认行为

$('.withTrans').click(function(e){
    e.preventDeault();
    $(this).animate('opacity','0',300,function(){
           e.resumeDefault();      // does something like this exist?
    });

})

我在文档的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();
    }
});

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

我在keydown和停止传播时遇到了困难

我不希望我的页面刷新,我已经尝试了我能想到的每一种方式,我目前的代码是

 <script>
 $(document).ready(function() {
 var e = jQuery.event( 'keydown', { which: $.ui.keyCode.ENTER } );

 $('#id_number').trigger(e, function(event){
event.preventDefault();
event.stopPropagation();
});

 });
 </script>

我在这里做错了什么？我认为事件被正确调用,我有正确链接的jquery和jquery ui并且没有收到控制台错误

更新 很好它正在工作,现在我正在获取对象函数的属性'事件'(a,b){return new e.fn.init(a,b,h)}不是下面代码的函数错误

 $(document).ready(function() {
 var e = jQuery.event( 'keydown', { which: $.ui.keyCode.ENTER } , function(event){
  event.preventDefault();
  event.stopPropagation();
}); 

 $('#id_number').trigger(e);

 });

更新#2 - 修复

我学到的东西

1. 文件中不需要trigger()(准备好)
2. 让$ .ui.keyCode工作很困难(至少对我而言)
3. 总是看到其他功能附加到输入(onblur,onfocus,ect)aka doh

把它改写成这个,工作得非常好

 $(document).ready(function() {
    $('#id_number').keydown(OnKeyDown);
 });    

function OnKeyDown(e){
var code = (e.keyCode ? e.keyCode : e.which); //to support both methods
if(code == 13) { //the Enter …

我正在使用jquery mobile,我需要防止特定元素上的滑动事件.需要这样做是因为我使用滑块,我不希望调用滑动事件.当用户使用滑块操作时,我希望它被阻止.我无法找到任何解决方案,所以我在这里寻求帮助.

这是我的javascript代码:

$( document ).on( "pageinit", "#demo-page", function() {
  $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {

  // We check if there is no open panel on the page because otherwise
  // a swipe to close the left panel would also open the right panel (and v.v.).
  // We do this by checking the data that the framework stores on the page element (panel: open).

   if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
     if ( e.type …

我有以下简单形式:

<form action="" id="myForm">
    Use <code>return false</code> (if not checked,
    <code>e.preventDefault()</code> will be used):
    <input type="checkbox" id="myCheckbox" checked>

    <br/>

    <input type="submit" value="Submit me">
</form>

那么,JavaScript方面:

document.getElementById("myForm").addEventListener("submit", function (e) {
    if (document.getElementById("myCheckbox").checked) {
        return false;    
    }
    e.preventDefault();
});

为什么return false不不阻止默认行为,而e.preventDefault()像预想的那样的作品？

根据这个答案:

return false 当你打电话时它正在做三件事:

1. event.preventDefault();
2. event.stopPropagation();
3. 停止回调执行并在调用时立即返回.

所以,event.prevendDefault()被称为.这只发生在jQuery回调中吗？

的jsfiddle

我试图阻止退格按钮在每个浏览器中返回一页.现在我正在使用此代码:

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

除了打开选择字段下拉列表时,它对所有内容都可以正常工作,此事件将被忽略,退格区无论如何都会返回一页.我怎么解决这个问题？谢谢您的回答.

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

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

    const doIt = await checkSomething();

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

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

在ReactJS中尝试做一个简单的onClick事件/函数。

单击按钮后，我想运行一个名为“ onClick”的函数，但是在控制台中出现此错误：

app.js:62 Uncaught TypeError: Cannot read property 'preventDefault' of undefined

用谷歌搜索，但不确定我要怎么做。我看过ReactJs文档，这看起来是正确的，但显然不正确。这是我的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter} from 'react-router-dom';
import axios from 'axios';

import Navbar from './components/Navbar';
import Header from './components/Header';
import GiphyButton from './components/GiphyButton';
import './assets/sass/main.scss';

class App extends React.Component {

  constructor() {
    super();

    this.state = {
      giphy: []
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    e.preventDefault();

    console.log('giffy button clicked');
    axios.get('http://api.giphy.com/v1/gifs/search?q=otters&api_key=<API KEY>')

      .then(res => {
        this.setState({ giphy: res.data });
        console.log(res.data);
      });
  } …

使用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请注意，当我单击另一个复选框时，带有阻止的复选框如何将其外观切换为实际状态。