如何在 JavaScript 中编写鼠标按下事件？

Question

这是非常基本的，我确信 JavaScript 但我遇到了困难，所以任何帮助将不胜感激。

我想使用对象的第二个子节点中发生的 mouseDown 事件来调用 for 循环中的函数。斜体部分是我尝试这样做的部分。顺便说一句，swapFE 功能仍在开发中。另一件事是，当我将斜体部分放入 swapFE 函数时，一切正常，但当我将其放入 for 循环时，它并没有全部显示出来。我不知道为什么。当我用鼠标单击短语时，我基本上是在尝试将法语短语替换为英语短语。

function setUpTranslation() {
   var phrases = document.getElementsByTagName("p");
   var swapFE = document.getElementsByTagName("phrase");

   for (i = 0; i<phrases.length; i++) {
      phrases[i].number = i;
      phrases[i].childNodes[1].innerHTML = french[i];

      *phrases[i].childNodes[1].onMouseDown = swapFE;*

      }
  }


    /* see "function_swapFE(phrase,phrasenum);" below. The expression to call function swapFE
    is located underneath "function swapFE(e)" because although the directions said to put the
    "run swapFE" within the for loop it did not work properly that's why I put it beneath the 
    "function swapFE(e)".*/



function swapFE(e) {
    var phrase = eventSource(e);
    var phasenum = parseInt(1) = [1].innercontent.previousSibling;

    phrase.node.previousSibling.onmousedown=swapFE
    function_swapFE(e)(phrase,phrasenum);
   }

如果

您有疑问请告诉我。

感谢您的帮助。

Answer 1

这样，您就创建了一个名为 swapFE 的局部变量；

var 交换FE =
document.getElementsByTagName("短语");

然后你可以将此变量设置为 mouseDown

短语[i].childNodes[1].onMouseDown =
交换FE；*

这是不对的... onMouseDown 应该设置为函数名称，而不是该名称的局部变量。所以你可能应该将本地变量重命名为其他名称。这至少会让你更接近解决方案。

Answer 2

我只能对源代码可能出现的问题做出一些猜测。首先，以下代码假设所有

标记都至少 2 个子元素：

for (i = 0; i<phrases.length; i++) { 
    phrases[i].number = i; 
    phrases[i].childNodes[1].innerHTML = french[i]; 

    *phrases[i].childNodes[1].onMouseDown = swapFE;* 
} 

如果您的

标记页面的子元素少于 2 个，将引发错误并且脚本执行将停止。最好的解决方案是向每个包含您要查找的元素的

标记添加一个类属性。或者，您可以使用 if 语句检查第二个子节点是否存在。或者你可以两者都做。

其次，像所有事件一样，onmousedown 应该以小写形式声明。设置 onMouseDown 不会引发错误，而是在元素上创建自定义属性，而不是附加事件处理程序。

最后，以下代码：

var swapFE = document.getElementsByTagName("phrase"); 

将在本地覆盖该函数的全局函数 swapFE，并将其替换为变量。

这就是我编写 setupTranslation 函数的方式：

function setUpTranslation() {     
    var phrases = document.getElementsByTagName("p");
    // rename the swapFE var as outlined below
    var swapFENodes = document.getElementsByTagName("phrase");

    var cNode;  // set up an empty variable that we use inside the loop
    for (i = 0; i<phrases.length; i++) {
        /* Check for the existence of the translationPhrase class 
           in the <p> tag and the set the cNode var to childNodes[1]
           and testing for its existence at the same time */
        if (cNode.className != "translationPhrase" 
             || !(cNode = phrases[i].childNodes[1]))
             continue; // skip to the next iteration

         phrases[i].number = i;
         cNode.innerHTML = french[i];     
         cNode.onmousedown = swapFE;  // Changed onMouseDown to onmousedown
    }     
}