标签: dom-events
div onmouseout 不符合预期
改编自http://www.webdeveloper.com/forum/archive/index.php/t-65078.html 的文本和示例代码，可能无法反映实际问题：
我有一个 div，然后有一个 div，里面有一个嵌套表：在父 div 之外还有一些 div。
<div onmousemove="move()" onmouseout="out()">
<div id="dvRep"> </div>
<table>
<tr><td>ITEM 1</td></tr>
<tr><td>ITEM 2</td></tr>
<tr><td>ITEM 3</td></tr>
<tr><td>ITEM 4</td></tr>
<tr><td>ITEM 5</td></tr>
</table>
</div>
<div id="divChartPopupMenu">
Hide me.
</div>
每当我在 div 内移动鼠标时，它都会正确调用移动函数，但该onmouseout属性并不像我想象的那样工作。我认为out()只有当您将鼠标移出 div 时才会调用该函数，但是out()每当我移出表格行之一时都会调用该函数。因此，如果我的鼠标在一行上并且我移动到下一行，它会调用out(). 我只想out()在用户离开整个 div 时被调用。有任何想法吗？
我正在尝试的功能是我隐藏了另一个 div。
推荐指数
解决办法
查看次数
为什么 <script> 在 HTML 中对于 window.onload 事件的定位很重要？
我有一个动态隐藏文本输入字段的表单，具体取决于加载时选项字段的初始选择。经过一番尝试和错误后，我意识到<script>必须将标签放置在<form>元素下方才能使此功能正常工作：
<html>
....
<body>
....
<form>
<select name=choice>
<option value=0 selected>Default</option>
<option value=1>Others</option>
</select>
<input type=text name=others></input>
</form>
....
<script type='text/javascript'>
function init()
{
var A = document.forms[0].choice;
var B = document.forms[0].others;
if(A.options[A.selectedIndex].value == 0) B.style.display = 'none';
}
window.onload = init();
</script>
....
</body>
</html>
该事件window.onload是一个全局事件，在页面所有资源（包括 DOM、图像、框架等）加载完成后触发。那么，为什么标签还需要<script>放在<form>元素下面呢？
推荐指数
解决办法
查看次数
在点击事件函数中使用 this(类对象)
我在按钮上有一个单击事件，我必须传递此类对象才能调用单击事件内的函数。我的要求如下
$(this).on('click', function(){
this.callFunc();
});
现在，我将其存储在 self 中并在单击函数中使用它。目前我有以下代码来实现此目的。
var self = this;
$(this).on('click', function(){
self.callFunc();
});
有没有办法直接使用这个里面的点击功能？
推荐指数
解决办法
查看次数
如何使用 html 范围滑块更改音频对象的音量？
嗨，这是我用来播放喊播演员流的代码，工作正常，但无法更改音量，这是错误的，我是新手。
<script>
function audioobject()
{
var link = new Audio('http://107.155.72.250:8000/;.mp3');
return link;
}
function startradio()
{
audioobject().play();
}
function changevolume(amount)
{
audioobject().setVolume(amount);
}
</script>
<input type="button" id="play" value="Play" onclick="startradio()"/>
<input type="range" id="vol" max="1" min="0" step="0.01" onchange="changevolume(this.value)"/>
推荐指数
解决办法
查看次数
EventTarget.addEventListener() 的 useCapture 参数使用？
我正在研究普通的 JavaScript，我在理解函数useCapture中这个参数的用途时遇到了一些困难EventTarget.addEventListener()。
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
useCapture可选
如果为 true，则 useCapture 指示用户希望启动捕获。启动捕获后，指定类型的所有事件将被分派到已注册的侦听器，然后再分派到 DOM 树中该侦听器下方的任何 EventTarget。通过树向上冒泡的事件不会触发指定使用捕获的侦听器。有关详细说明，请参阅 DOM Level 3 事件和 JavaScript 事件顺序。如果未指定，useCapture 默认为 false。
阅读它的文档，我对第一句话感到困惑。为了理解它，我设置了一个包含三个嵌套元素的小测试页面，在最上面的两个 div 上有一个点击侦听器。
代码 ：
var treeTopEl = document.getElementById('container');
var treeMiddleEl = document.getElementById('wrapper');
var output = document.getElementById('output');
var treeTopElListener = function(event){
var elId = event.target.id;
output.innerHTML += "\nListener on the top element was triggerd,\n\t The event target id is : "+elId;
};
var treeMiddleElListener = function(event){
var elId = event.target.id;
output.innerHTML += "\nListener on the middle …推荐指数
解决办法
查看次数
CTRL keyCode (17) 在 JavaScript 中不起作用？
我有以下代码将 eventListener 添加到 HTML textarea。它应该控制台记录按下的键码，并且，如果键码是 == 到 17 (CTRL)，则控制台记录“您按下了 CTRL。”。出于某种原因，当我在 textarea 中按下 CTRL 时，它不是控制台记录按下的 keyCode，也不是“你按下了 CTRL”。例如，如果我按“A”，控制台日志返回“97”，这是正确的。它也适用于所有其他字母。
这是代码：
document.getElementById("msgBox").addEventListener("keypress",function(e){
console.log(e.keyCode);
if(e.keyCode == 17){
console.log("You pressed CTRL.");
}
});
我究竟做错了什么？
更新：它也不适用于其他特殊键，如“shift、Fx、alt、home 等。
文本区域的 HTML ：
<textarea id="msgBox" placeholder="Enter your message" autofocus></textarea>
推荐指数
解决办法
查看次数
SVG中的点击事件坐标
此HTML包含SVG：
<div class="container">
<div class="spacer"></div>
<svg>
<g id="polygonGroup" transform="translate(80, 50)">
<polygon points="-60,-10 -35,-30 -10,-10 -10,30 -60,30"></polygon>
<polygon points="10,-10 35,-30 60,-10 60,30 10,30"></polygon>
<polygon class="origin" points="-4,0 0,4 4,0 0,-4"></polygon>
</g>
<g id="textGroup" transform="translate(80, 50)">
<text x="-35" y="10">Text</text>
<text x="35" y="10">Text</text>
</g>
</svg>
</div>
这个简单的jQuery click事件处理程序：
function clicked(event) {
console.log(event.offsetX, event.offsetY);
}
$('svg').click(clicked);
如此处所示：https : //jsfiddle.net/1ht0L8y6/6/在不同的浏览器中具有不同的行为：
Chrome：无论我在SVG内的哪个位置单击，坐标都基于SVG元素的左上角。这是我想要的行为。
Firefox：坐标基于我所处元素的左上角，这些元素可能是SVG，多边形或文本。
IE和Edge：
- 当在SVG中但不在其任何子元素中时，坐标基于SVG元素。
- 在多边形中时，坐标基于
<g>组的原点及其translate偏移（即黑菱形）。负坐标可以通过这种方式实现，这与Chrome或Firefox不同。 - 我在这些浏览器中观察到文本元素的不同行为：它们将基于文本元素的底部中间给出坐标。但是我无法在小提琴中重现这一点。在小提琴中，文本元素的行为与这些浏览器中的多边形相同。
什么是可靠的跨浏览器方式来获取点击的坐标？
推荐指数
解决办法
查看次数
如何在不丢失“ this”参考的情况下使用bind？
有没有一种方法可以部分地将附加参数应用于函数，而又不会丢失this事件处理程序给定的绑定。bind需要一个this值，因此将null作为第一个参数将丢失对<button>Click</button>原本会存在的DOM元素的引用。最好在bind不丢失对元素的引用的情况下提供诸如allow之类的附加参数
const button = document.querySelector('button')
function once(...args) {
console.log(...args, this) // {prop: 'val'}, event, `Window`
button.removeEventListener('click', bound)
}
const extraArgs = {
prop: 'val'
}
const bound = once.bind(null, extraArgs)
button.addEventListener('click', bound)<button>Click</button>在此示例中，可以通过仅button作为绑定的第一个参数传入来实现效果，但是我有兴趣不“丢失”该绑定this，而不用对元素的引用替换它。
如何在不丢失thisDOM元素绑定的情况下向函数提供额外的参数？
推荐指数
解决办法
查看次数
为什么即使在alert（）之前调用了preventDefault（），alert（）仍会执行？
在以下代码中，alert('Alert on btn is triggered') })即使在el event.preventDefault()的click处理程序中的此行之前调用了方法，也为什么会触发事件#btn。
同样，为什么onclick="alerted()不在div 上#btn或在#wrapdiv 上触发，而回调触发click随addEventListener触发一起触发。
var btn = document.getElementById('btn')
var wrap = document.getElementById('wrap')
btn.addEventListener('click', function() {
event.stopPropagation()
if (event.cancelable) {
event.preventDefault()
}
alert('Alert on btn is triggered')
})
function alerted() {
alert('Alerted fired')
}
wrap.addEventListener('click', function() {
alert(this.id)
alert(event.target.tagName + "#" + event.target.id)
})#wrap {
padding: 20px;
border: 1px solid red;
}<div id="wrap" onclick="alerted">
<button id="btn" …推荐指数
解决办法
查看次数
如何使用打字稿将参数传递给 addEventListener 侦听器函数？
情况有点像：
const searchKeyPressHandler = (appDispatch: any, e: any) => {
if (e.keyCode === 27) {
appDispatch({ type: "closeSearch" })
}
}
document.addEventListener("keyup", searchKeyPressHandler); // <-- error on searchKeyPressHandler
return () => document.removeEventListener("keyup", searchKeyPressHandler); // <-- error on searchKeyPressHandler
searchKeyPressHandler 使用打字稿返回错误，我不知道如何避免它。
document.addEventListener("keyup", function (e) { searchKeyPressHandler(appDispatch, e) });
可能是一个解决方案 addEventListener
但它没有用，removeEventListener因为该事件永远不会被删除
return () => document.removeEventListener("keyup", function (e) { searchKeyPressHandler(appDispatch, e) });。
javascript event-listener addeventlistener dom-events typescript
推荐指数
解决办法
查看次数
标签 统计
dom-events ×10
javascript ×10
events ×2
html ×2
jquery ×2
click ×1
dom ×1
keyboard ×1
keycode ×1
mousemove ×1
svg ×1
this ×1
typescript ×1