javascript - 运行一次 JS 函数

Question

我有这个 JS 函数:

<script type="text/javascript">
                    var counter = <?php echo $oak; ?>;
                    function myFunction() {
                        counter++;
                        document.getElementById('countervalue').innerHTML = counter;
                    }
                </script>

单击图像后将触发此函数。我的问题是我希望它只在第一次按下图像时触发。有任何想法吗？提前致谢。

html代码:

<div class="cut_oak_tree">
            <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC -->
            <br>
            <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC -->
            <img src="http://www.pbpixels.com/x/images/oak.png  " onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC -->
        </div>

Answer 1

尝试 this code :

在事件调用中添加 this(onclick="myFunction(this)") 然后你的函数看起来像 function myFunction(img) {。然后在里面删除它的 click 处理程序:

img.onclick = null;

最终结果是:

function myFunction(img) {
    counter++;
    document.getElementById('countervalue').innerHTML = counter;
    img.onclick = null;
}

还有一个图片示例:

<img src="http://www.pbpixels.com/x/images/oak.png  " onclick="myFunction(this)" />

我不会像@SLoW 建议的那样使用boolean，因为那样你就无法知道哪个图像已经被点击了。为此，您必须使用一个对象并存储每个图像 id - 或类似的东西 - 及其 clicked 状态。