Question

目前，我在javascript上有一个carrousel，当我们点击超链接时可以正常工作，如下所示：

<div id="direction1">
  <p>
    <a href="javascript:" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" />
    </a>
  </p>
</div>

我想用onMouseOver执行这个场景。所以我试试这个，但它不起作用：

<div id="direction1">
  <p onMouseOver="this.getElementsByTagName('a').click()">
    <a href="javascript:" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" />
    </a>
  </p>
</div>

如何修复???

PS：

这是有问题的JS代码：

next: function () {
        if (this.current) {
            var currentIndex = this.current._index;
            var nextIndex = (this.slides.length - 1 == currentIndex) ? (this.options.circular ? 0 : currentIndex) : currentIndex + 1;
        } else {
            var nextIndex = 1;
        }

        if (nextIndex == 0 && this.options.circular && this.options.effect != 'fade') {
            this.scroller.scrollLeft = 0;
            this.scroller.scrollTop  = 0;
            nextIndex = 1;
        }

        if (nextIndex > this.slides.length - (this.options.visibleSlides + 1)) {
            nextIndex = this.slides.length - this.options.visibleSlides;
        }       

        this.moveTo(this.slides[nextIndex]);
    }

Answer 1

代码中的哪个位置是分配给锚元素的click事件？此外，为什么仅使用单独的元素来分配mouseover事件？

你可以更好地使用

<div id="direction1">
  <a href="http://linktothepicture" onmouseover="yourObject.next()" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" /></a>
</div>

甚至更好地在单独的文件中分配JavaScript：

window.onload = function () {
  var nextButton = document.getElementById("idOfNextButton");
  nextButton.onmouseover = yourObject.next;
};

这样，当用户未启用JavaScript和/或点击下一步按钮时，您的网站仍会正常运行。

Answer 2

<div id="direction1">
    <p onMouseOver="document.getElementById('myLink').click()">
        <a id="myLink" href="javascript:" class="carousel-control" rel="next"><img class="fleche_suiv" src="/project/images/next.png" alt="Suivant" title="Suivant" />
        </a>
    </p>
</div>

'getElementsByTagName'返回一个数组。

Answer 3

这里有两个问题。

正如Jeaffrey所说，getElementsByTagNames返回一个数组，所以你的代码也可能是这样的。

<p onMouseOver="this.getElementsByTagName('a')[0].click()">

但这不会起作用，因为没有方便的方法在vanilla javascript中以编程方式生成点击。见In JavaScript can I make a "click" event fire programmatically for a file input element?。它至少仍然可以用jQuery：http://api.jquery.com/click/，但包括这样的依赖似乎有点矫枉过正。

我在你的情况下看到的最佳解决方案是直接在p [onmouseover]中调用[href]方法。

<p onMouseOver="yourObjectInWichNextIsdefined.next()">

onMouseOver，超链接和rel ...帮助我:(

3 个答案: