删除 onclick 函数

Question

我目前正在尝试为一个项目创建一个新的图像滑块，但有一个问题。任务是在页面上显示一个图像，该图像将打开全尺寸的 onclick。但是，我想让它的功能消失，图像 returns 再次回到原始状态。

这是我的代码：

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
    <img src="//path" onClick="full()" id="image" />
    <script type="text/javascript">
        function full() {
            $(function () {
                $('#image').on('click', function () {
                    $(this).width(1000);
                });
            }); 
        }
    </script>
</body>   
</html>

图像以较大的状态打开，这很好，但我如何实现第二个 onclick 函数以取消第一个？

感谢您的帮助！

Answer 1

您真正要求的是：

下面的代码向您展示了如何执行您真正要求的操作：

第一次点击后，您将宽度更改为 1000，您删除了初始点击处理程序并添加了一个新的点击处理程序以重置宽度
第二次点击后，您重置并移除第二次点击处理程序
第二次点击后的任何点击都不再执行任何操作

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                $(this)
                    .width(1000)
                    .off('click')
                    .on('click', function() {
                        $(this)
                            .width('')
                            .off('click');
                });
            });
        }); 
    </script>
</body>   
</html>

另请参阅 this Fiddle 以获取工作演示。

您可能想要什么：

您可能想要的只是一个切换图像宽度的单击处理程序。

最好的方法是这样的：

<html>
<head>
    <title>Fullscreen</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <img src="//path" id="image" />
    <script type="text/javascript">
        $(document).ready(function() {
            $('#image').on('click', function() {
                var me = $(this);
                me.width(me.width() !== 1000 ? 1000 : '');
            });
        });
    </script>
</body>   
</html>

另请参阅 this Fiddle 以获取工作演示。

Answer 2

要参加之前分配的活动，请使用

$('#image').off('click')

要缩小图像，请使用

var size = 0;
function full() {
    $(function () {
        $('#image').on('click', function () {
            if (size === 0) {
                size = $(this).width();
                $(this).width(1000);
            } else {
                $(this).width(size);
                size = 0;                     
            }
        });
    }); 
}

Answer 3

如果宽度为 1000px，则将其删除，否则将其设置为 1000，如下所示。

<img src="//path" id="image" />

<script type="text/javascript">
    $('#image').on('click', function () {
        if ($(this).width() == '1000')
            $(this).width('');
        else
            $(this).width(1000);
    });
</script>

Answer 4

您不需要删除 onclick 侦听器，但需要修复一些问题。您有一个内联 onclick 回调，它实际上调用了 full 函数，该函数一遍又一遍地附加一个新的点击监听器，最终导致点击处理程序被调用 2^n 次。

您可以只保留代码中的那个，并在其中检查图像的当前宽度，以便选择单击它时发生的情况（假设起始宽度为 50px）：

$('#image').on('click', function() {
  $(this).width($(this).width() != 1000 ? 1000 : 50);
});

img {
  width: 50px;
  transition: width 0.2s linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://www.planwallpaper.com/static/images/518084-background-hd.jpg"  id="image" />

Answer 5

使用 class & toggleClass

function full() {
    $(function () {
        $('#image').on('click', function () {
            $(this).toggleClass('changeWidth');
        });
    }); 
}

Example

删除 onclick 函数

Removing an onclick function

javascript

jquery

function

click

event-handling

您真正要求的是：

您可能想要什么：