Question

点击 <a href..></a> 时，我需要运行onclick功能。

<div class="gallery">
    <div id="btn">
        <a href="#" id="btnRight" class="right"></a>
    </div>
</div>

<script type="text/javascript">
var element = document.querySelectorAll("a#btnRight.right");   
element.onclick = (function() {

    var count = 0;

    return function(e) {

        count++;
        console.log(count);
        if (count === 3) {

            //...

            count = 0;
        }
    };
})();
</script>

我无法在html中使用<a href="#" onclick=""...></a>，因此我需要选择 a＃btnRight.right 。我试过了：

var element = document.querySelectorAll("a#btnRight.right");
var element = document.querySelector("#btnRight.right");
var element = document.getElementById("btnRight").getElementsByClassName("right")[0];
var element = document.getElementById("btnRight").getElementsByTagName("a");

但它不起作用。谢谢

Answer 1

<div class="gallery">
    <div id="btn">
        <a href="#" id="btnRight" class="right">CLICK ME!</a>
    </div>
</div>

<script type="text/javascript">
    var element = document.getElementById("btnRight");
    element.addEventListener('click', function() {
        var count = 0;
        return function(e) {
            count++;
            console.log(count);
            if (count === 3) {
                //...
                count = 0;
            }
        };
    }()
    )
</script>

Answer 2

querySelectorAll返回一个nodeList，其中包含具有指定id的所有元素，因此如果只有一个具有该id的元素，则需要将元素更改为element [0]，并将元素id更改为btnRight，如下所示： / p>

<div class="gallery">
    <div id="btn">
        <a href="#" id="btnRight" class="right"></a>
    </div>
</div>

<script type="text/javascript">
var element = document.querySelectorAll("#btnRight");   
element[0].onclick = (function() {

    var count = 0;

    return function(e) {

        count++;
        console.log(count);
        if (count === 3) {

            //...

            count = 0;
        }
    };
})();
</script>

当然你也可以像这样使用getElementById：

var element = document.getElementById("btnRight");   
element.onclick =  (function() {

    var count = 0;

    return function(e) {

        count++;
        console.log(count);
        if (count === 3) {

            //...

            count = 0;
        }
    };
})();

Answer 3

对您的代码进行少许修改：

<div class="gallery">
<div id="btn">
    <a href="#" id="btnRight" class="right">pp</a>
</div>

   document.getElementById("btnRight").onclick = CustomFunction;

   function CustomFunction() {

    var count = 0;

    return function (e) {

        count++;
        console.log(count);
        if (count === 3) {

            //...

            count = 0;

        }
    };
}

Answer 4

尝试以下选择器，您可以使用其ID选择任何DOM元素，并确保ID在您的DOM中应该是唯一的。

 element = document.getElementById('btnRight');

此外，如果您尝试选择具有“正确”权限的多个元素。那么你应该使用下面的选择器。

 element = document.getElementsByClassName("right");

Javascript onclick函数元素选择器

4 个答案: