Javascript onmousemove事件未触发
我搜索了本博客和其他博客中提供的答案,但没有找到任何答案。非常感谢您的帮助 我有一个onmousemove事件,它正在执行要触发的事件列表中的第一项,但不会执行第二项。Javascript onmousemove事件未触发,javascript,html,onmouseover,Javascript,Html,Onmouseover,我搜索了本博客和其他博客中提供的答案,但没有找到任何答案。非常感谢您的帮助 我有一个onmousemove事件,它正在执行要触发的事件列表中的第一项,但不会执行第二项。 document.getElementById(“map\u image\u africa”).onmousemove=maps.redraw;learnPanel.redraw 问题似乎不是特定于浏览器的;它出现在Chrome和Safari中。还没有试过firefox 在Chrome中,我可以打开浏览器的控制台并执行learn
document.getElementById(“map\u image\u africa”).onmousemove=maps.redraw;learnPanel.redraw代码>
问题似乎不是特定于浏览器的;它出现在Chrome和Safari中。还没有试过firefox
在Chrome中,我可以打开浏览器的控制台并执行learnPanel.redraw()代码>并按预期工作。
此外,如果我在onmouseover事件中的maps.redraw和learnPanel.redraw语句之间放置了一条警报语句,警报将按预期执行
learnPanel对象是使用下面的代码创建的
LearnPanel.prototype = new Panel();
LearnPanel.prototype.constructor = LearnPanel;
function LearnPanel() {
}
LearnPanel.prototype.draw = function() {
var br_element = document.createElement("br");
/* country name */
if(this.isCountryNamesSelected === "yes") {
var temp_label;
temp_label = document.createElement("label");
temp_label.classList.add('quiz_question_heading_label');
temp_label.innerHTML = "Country: ";
this.flagColumnTab.appendChild(temp_label);
this.labelCountryName = document.createElement("label");
this.labelCountryName.id = "country_name";
this.labelCountryName.classList.add('quiz_question_label');
this.flagColumnTab.appendChild(this.labelCountryName);
this.flagColumnTab.appendChild(document.createElement("br"));
}
/* capital */
if(this.isCapitalNamesSelected === "yes") {
var temp_label;
temp_label = document.createElement("label");
temp_label.classList.add('quiz_question_heading_label');
temp_label.innerHTML = "Capital: ";
this.flagColumnTab.appendChild(temp_label);
this.labelCapitalName = document.createElement("label");
this.labelCapitalName.id = "capital";
this.labelCapitalName.classList.add('quiz_question_label');
this.flagColumnTab.appendChild(this.labelCapitalName);
this.flagColumnTab.appendChild(document.createElement("br"));
}
/* flag */
if(this.isCountryFlagsSelected === "yes") {
this.flagImage = document.createElement("img");
this.flagImage.id = "flag_image";
this.flagImage.src = "/images/flags/_flag.jpeg";
this.flagImage.alt = "flag logo";
this.flagColumnTab.appendChild(this.flagImage);
this.flagColumnTab.appendChild(document.createElement("br"));
this.flagColumnTab.appendChild(document.createElement("br"));
}
}
LearnPanel.prototype.redraw = function() {
alert('redrawing learnPanel');
/* country name */
if(learnPanel.isCountryNamesSelected === "yes") {
learnPanel.labelCountryName.innerHTML = maps.getCurrentDisplayCountryDown();
}
/* capital */
if(learnPanel.isCapitalNamesSelected === "yes") {
learnPanel.labelCapitalName.innerHTML = maps.getCurrentCountryCapitalDown();
}
/* flag */
if(learnPanel.isCountryFlagsSelected === "yes") {
learnPanel.flagImage.src = "/images/flags/" + maps.getCurrentFlagDown() + "_flag.jpeg";
learnPanel.flagImage.alt = "flag of " + maps.getCurrentFlagDown();
}
/* head of state */
/* famous landmark */
}
learnPanel = new LearnPanel();
提前感谢您的帮助 欢迎来到StackOverflow
这里需要的是一个匿名函数。为\map\u large\u africa
上的mousemove
属性分配函数时,需要有两个不同的函数。不幸的是,由于您编写以下语句的方式:
`document.getElementById("map_image_africa").onmousemove = maps.redraw; learnPanel.redraw;`
它实际上被解析为:
document.getElementById("map_image_africa").onmousemove = maps.redraw;
learnPanel.redraw;
你看到问题了吗?分号用作命令的结尾。在mousemove上重新绘制地图,但learnPanel.redraw
不是onmousemove
分配的一部分,并且该行仅在onmousemove
属性分配给后执行一次。通过将其包装在一个脚本中,一次可以执行多行javascript
请尝试以下操作:
document.getElementById("map_image_africa").onmousemove = function() {
maps.redraw(); // note that these lines have () after the method name.
learnPanel.redraw();
}
虽然有您,但请注意,不鼓励直接修改属性,如onmousemove
和onclick
,而是与DOM元素交互的首选方式,因为它将javascript与HTML分离
上述onmousemove
分配可以(也应该)重写为:
document.getElementById("map_image_africa").addEventListener('mousemove', function() {
maps.redraw();
learnPanel.redraw();
}, false);
谢谢你的明确回答——它解决了这个问题。我也接受了你对eventListeners的建议。谢谢