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状态。

Answer 2

添加标志

function myFunction() {
    if(!myFunction.invoked){
       counter++;
       document.getElementById('countervalue').innerHTML = counter;

       myFunction.invoked = true;
    }
}

myFunction.invoked = false;

Answer 3

删除onclick处理程序，方法是将您单击的元素发送到函数：

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

function myFunction(elm) {
    elm.onclick = null; // Remove the onclick
    counter++;
    document.getElementById('countervalue').innerHTML = counter;
}

Answer 4

如果您对jquery方法感兴趣，可以使用.one（）！ http://api.jquery.com/one/

    var counter = <?php echo $oak;?>

    $(".cut_oak_tree img").one("click",function(){
           counter++;
           $("#countervalue").text(counter);   
    });

Answer 5

// the wrapper that allows to call the inner function only once
function once(inner) {
    var executed = false;
    return function (args) {
        if (executed === false) {
            executed = true;
            inner.apply(this, arguments);
        }
    }
}

// a test function that should only be called once
var inner1 = function (name, age) {
    window.alert("1 " + name + " -> " + age);
}

// another test function
var inner2 = function (name, age) {
    window.alert("2 " + name + " -> " + age);
}

// testing
var wrapped1 = once(inner1);
wrapped1("Tom", 23);
wrapped1("Tina", 24);
wrapped1("Toby", 25);

var wrapped2 = once(inner2);
wrapped2("Tom", 23);
wrapped2("Tina", 24);
wrapped2("Toby", 25);

Answer 6

我创建了一个名为isClicked的变量，在加载页面时将其设置为false，然后在单击图像时将其设置为true。然后在递增计数器之前写一个if语句以确保isClicked为false。

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

运行一次JS函数

6 个答案: