标签: dom-events

假设我有一个简单的代码，例如：

<ListItem
  button={true}
>
  <Typography variant='caption' color='primary'>
            {value}
  </Typography>
  <Button
    onClick={foo}
  >
    Button
  </Button>
</ListItem>

当我单击 ListItem 内的任何内容时，会触发连锁反应，这是可以的，但是当我单击按钮时，我不希望触发父组件的连锁反应。我怎么做？

我有一个监听名为 的事件的表单onBeforeSubmit。当我提交表单时会触发此事件，但如果回调返回 ，则会停止提交false。

问题

我的回调涉及对 API 的异步调用。在决定是否返回 false 之前，如何强制事件等待承诺解决？目前它不等待解决fetch()- 我已经尝试了两种async/await方法.then()......

我尝试过的：

尝试1：

onBeforeSubmit: async (e) {
  const res = await fetch(url);
  // if res value fails some condition
  return false
}

尝试2：

onBeforeSubmit: (e) {
  fetch(url).then( res => {
  // if res value fails some condition
  return false
  })
}

难道不应该await强制 javascript 等待 fetch 解析后再继续下一行吗？

我还注意到，每当我输入关键字时async，它都会忽略该return false语句并继续提交。是什么原因造成的？

编辑：这是第 3 方 API，因此我无法控制 onBeforeSubmit 的行为:(

怎样才能像用键盘打字一样输入呢？我知道我们可以通过设置输入值来做到这一点，但是我如何才能真正模拟键盘输入呢？

以下是显示 keydown 但在输入中不键入任何内容的示例代码。

html代码：

<p>Info: <input id="info" style="width:50%"></p>
<p>show: <input id="show" style="width:50%"></p>
<p><button onclick="showType()">Type in show</button></p

js代码：

document.addEventListener("keydown", function(ev) {
  document.getElementById("info").value = 
    "key= "+ev.key+" : "+ev.code+" : "+ev.keyCode;
}, true);

function showType(){
  document.getElementById("show").focus()
  document.getElementById("show").dispatchEvent(
  new KeyboardEvent("keydown", {
    key: "d",
    code: "KeyD",
    keyCode: 68,
    shiftKey: false,
    ctrlKey: false,
    metaKey: false
  })
);
}

代码笔链接

我在反应中定义了一些输入。我正在为他们的onChange功能分配一个功能。我可以找到当前值。如何以最简单的方式获取旧值？

我想要这个的原因是因为我想找到这个新值与旧值的比率并进行一些操作。

示例代码：

let onChange = (e) => {
    let newValue = e.target.value; // let oldValue = will be here     

}

<Input type="number"  onChange={onChange }></Input>

我在 Python 中使用 Playwright，我想将 javascript 注入到一个页面中，该页面监视 DOM 突变并触发自定义事件，并在 Python 中捕获这些事件。

这是一个 Python 脚本示例：

page.evaluate("//js code that essentially dispatches new CustomEvent('newPosts')")
page.on("newPosts", handle_posts)

到目前为止，Python 端没有任何反应，就好像事件不存在一样。

如果我手动检查浏览器控制台，我可以看到事件在浏览器端触发得很好（我正在捕捉它）document.addEventListener('newPosts', fn)

这个jquery片段的dojo中的等效代码是什么？

 $(".box").change(function() { }

我正在研究Google Calendar api.每当我创建任何事件并输入具有新行的事件的描述时,它会给出类似"Unterminated String constant"的错误.我将事件描述从java传递给javascript.So如何格式化具有新行的字符串？

我的代码是

 var EventDescription='<% =eventDetails.getEventDescription(eventIndex)%>'

    eventDetails -java class 
    getEventDEscription -Method to get the Description of event.
    eventIndex - no of the event whoes Description is needed .

它正常工作.只有在描述有新线时才给出错误.

我正在使用ext js 4.1.我正在开发一个应用程序,必须支持IE9,最新的FF,最新的Chrome和Safari.

如果有一些数据待提交,我需要在用户想要离开时显示警告消息.

我使用原始java脚本执行了以下操作

window.onbeforeunload=function(){
    if (Ext.getStore('LocalChangesStore')){
        if (Ext.getStore('LocalChangesStore').getCount() > 0) {
            return 'Your changes are be lost.'; 
        } 
    }
};

我想知道是否可以使用ext js.我看到了以下功能

app.js:

EventManager.onWindowUnload( function(){
    if (Ext.getStore('LocalChangesStore')){
        if (Ext.getStore('LocalChangesStore').getCount() > 0) {
            return 'Your changes are be lost.'; 
        } 
    }        
    }, this
);

但它不起作用.

有人可以告诉我哪种方法可以解决这个问题.

在此先感谢费德里科

我需要一个长按事件来绑定到svelte 3中的按钮。我想以尽可能少的“ boilerplaty”方式进行此操作。

我已经尝试过使用长按功能，但是这似乎有些令人费解和棘手，也似乎有点慢。

function longPress(node, callback) {
     console.log(node)
    function onmousedown(event) {
      const timeout = setTimeout(() => callback(node.innerHTML), 1000);

      function cancel() {
        clearTimeout(timeout);
        node.removeEventListener("mouseup", cancel, false);
      }

      node.addEventListener("mouseup", cancel, false);
    }

    node.addEventListener("mousedown", onmousedown, false);

    return {
      destroy() {
        node.removeEventListener("mousedown", onmousedown, false);
      }
    };
  }
</script>

<div>
  <Video />
  {#each Object.entries(bindings) as [id, value]}
    <button on:click = {()=>longPress(this,addImage)}> {id} </button>
  {/each}
</div>

这可行，但是我敢肯定有更好的方法。

Javascript可以模拟用户交互。

任何脚本可以像模拟用户交互click或focus在网页上的特定元件上，通过使用方法.click()和.focus()。

例：

const square = document.getElementsByClassName('square')[0];

const clickSquare = () => {

  event.target.dataset.receivedAction = 'click';
  event.target.innerHTML = '<p>I\'ve been clicked!</p>';
}

const clearSquare = () => {

  square.removeAttribute('data-received-action');
  square.innerHTML = '';
}

square.addEventListener('click', clickSquare, false);

const clickButton = document.querySelector('[data-deliver-action="click"]');
const clearButton = document.querySelector('[data-deliver-action="clear"]');

clickButton.addEventListener('click', () => square.click(), false);
clearButton.addEventListener('click', clearSquare, false);

.square {
display: block;
width: 120px;
height: 120px;
margin: 12px 6px;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: …