调试 HTML 时，有没有办法使用 JavaScript 或 jQuery 监听 div 宽度变化？我有一个 div 由于某些 CSS 而改变了大小，甚至不知道在哪里，甚至单步执行。我想知道是否有一种方法可以将事件挂接到 div 上，看看是什么导致它发生变化？即使可能，我也不知道如何传递堆栈信息来了解导致大小变化的原因，所以这甚至可能是不可能的。
当我同时按下左箭头和空格键时，我遇到了一个奇怪的问题。为什么空间不起作用？我尝试在这里测试http://jsfiddle.net/vor0nwe/mkHsU/也有同样的问题，你可以试试！如果你按向上、向左箭头，ctrl它就会起作用！用左+上+g不！这种情况发生在 Firefox、Chrome 等浏览器中……为什么？
最有可能的故障是键盘（参见正确答案）！x我尝试在文本文档中按左移（按住）和右移（按住） 。x没有出现。http://xahlee.blogspot.it/2010/06/keyboard-key-ghosting.html。我的键盘是罗技 200 :-(
我对原始 JavaScript 相当陌生（习惯于使用 jQuery）。我需要捕获一些链接的点击，阻止默认操作，然后根据链接 href 执行某些操作。
有些链接是直接的<a href="example.com">Lorem</a>，但其他链接可能包含其他 html 元素（图像、跨度...）。我将相同的事件处理程序绑定到所有必要的链接。我使用了一个解决方法函数，但在 Chrome 中它使用addEventListener,useCapture是 false。
在我的事件处理程序中，我用来event.target.getAttribute('href')获取链接指向的位置。这在处理第一种链接时有效，但在单击图像或跨度时不起作用，因为 event.target 是图像或跨度，而不是链接。我猜这与事件冒泡有关，但我不太确定解决方案是什么。
Angular JS如何以这样的方式监控击键：html中的输入字段不接受非数字值，而每次击键只接受整数和浮点数？
<form name="myForm">
<input ng-pattern="/^(?=.+)(?:[1-9]\d*|0)?(?:\.\d+)?$/" ng-model="value" name="number"/>
Valid? {{myForm.number.$valid}}
</form>
/***************************************************** *
* Function: renderTodos
* Builds a list of todo items from an array
* rebuilds list each time new item is added to array
****************************************************** */
function renderTodos(arr) {
// erases all previous content
uList.innerHTML = '';
for ( var i = 0; i < tdArray.length; i++ ) {
// create a link element
var remex = document.createElement('span');
//link element didn't work so try a button
//var remex = document.createElement('input');
//remex.setAttribute('type','button');
remex.setAttribute('class', 'deletex');
remex.innerHTML="X";
// set attribute index …下面是一个组件，其部分功能是在页面聚焦和模糊时更改窗口的标题。这是行不通的。
const ATitleChangingComponent = () => {
const focusFunction = (event: FocusEvent) => {
document.title = "focused";
};
const blurFunction = (event: FocusEvent) => {
document.title = "blurred";
};
useEffect(() => {
window.addEventListener("focus", focusFunction);
return window.removeEventListener("focus", focusFunction);
}, []);
useEffect(() => {
window.addEventListener("blur", blurFunction);
return window.removeEventListener("blur", blurFunction);
}, []);
return <p>some unimportant jsx</p>
};
然而，
const focusFunction = (event: FocusEvent) => {
document.title = "focused";
};
window.addEventListener("focus", focusFunction);
工作得很好。
一个附带问题：是否在每次渲染的函数中构建const focusFunction和const blurFunction构建？我假设如果是这样，它们应该从组件中取出以避免不必要的开销？
div当对我的服务器进行 Ajax 调用时，我有一个填充数据的标签。Ajaxrequest每隔10几秒就会从timerwith 中触发setInterval。这个 div 有一个滚动条。
每当用户滚动时，我想在计时器内禁用 Ajax。
我一直在研究一个应用程序。页面上有多个组件。它们里面的内容是可滚动的。预期的功能是当我在组件内滚动时，应该禁用不同元素上的悬停效果。在互联网上搜索后，我有一个可行的解决方案。我创建了一个像这样的 HoverDisabler 组件，
import React, {useEffect} from 'react';
export const HoverDisabler = ({children}) => {
let timer = 0;
useEffect(() => {
document.addEventListener('scroll', () => {
clearTimeout(timer);
if(!document.body.classList.contains('hoverDisabled')){
document.body.classList.add('hoverDisabled');
}
timer = setTimeout(() => {
document.body.classList.remove('hoverDisabled');
},500);
}, true);
}, []);
return children;
}
hoverDisabled 的 css 如下，
.hoverDisabled {
pointer-events: 'none',
}
我正在App用HoverDisabler这样的方式包装我的根组件，
<HoverDisabler><App /></HoverDisabler>
现在在所有组件中，如果我开始滚动，则hoverDisabled该类将添加到正文中，并在我停止滚动时将其删除。一切正常。我很好奇这是否是拥有此功能的正确方法？由于我缺乏经验，这种方法是否有任何缺点或我忽略的一些问题？
我有一个嵌入在我的网络应用程序中的 Google 幻灯片 iframe。
iframe 的实现是：
<iframe ref={slidesRef} src={src} width='100%' height='100%' allowFullScreen={true}/>
我想听主网页上的点击事件（而 iframe 不一定是焦点），然后创建它们相应的按键事件 - 并将它们传递给 iframe，从而使幻灯片 iframe 触发并响应用户键按。
我试过这样的事情：
function onButtonClick(e) {
e.stopPropagation();
slidesRef.current.focus();
slidesRef.current.dispatchEvent(new KeyboardEvent('keypress', {
key: 'ArrowRight', which : 39
}));
}
但它不起作用 - 它只关注 iframe，但不发送箭头键事件。
我看到了一些使用 iframe 内的父文档或使用 发送消息的解决方案postMessage，但我无法在 iframe 中添加任何代码，因为它的来源是外部链接。
我知道这是一个基本问题，但我不知道如何解决它！
在我的部分代码中，我有与下面相同的代码块；该部分工作正常，但对于这一部分，我遇到了错误！
console.log 仅第一次显示结果！
const bt = document.createElement('button');
bt.innerHTML = "CLICK HERE";
document.querySelector('#dv').append(bt);
bt.addEventListener('click', console.log('clicked'));
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="test.js" defer></script>
</head>
<body>
<div id="dv"></div>
</body>
</html>