删除onclick功能

Question

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

这是我的代码：

<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

采取先前分配使用的事件

$('#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 2

您真正要求的是：

下面的代码向您展示了如何做您真正要求的事情：

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

<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>

有关工作演示，请参阅此小提琴 。

你可能想要的：

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

最好的方法是这样的：

<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>

有关工作演示，请参阅此小提琴 。

Answer 3

如果width是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');
        });
    }); 
}

例

删除onclick功能

问题描述

5 个解决方案

解决方案1
1 已采纳 2016-02-12 19:01:20

解决方案2
0 2016-02-12 19:01:09

您真正要求的是：

你可能想要的：

解决方案3
0 2016-02-12 19:04:36

解决方案4
0 2016-02-12 19:07:43

解决方案5
0 2016-02-12 19:09:19

删除onclick功能

问题描述

5 个解决方案

解决方案1 1 已采纳 2016-02-12 19:01:20

解决方案2 0 2016-02-12 19:01:09

您真正要求的是：

你可能想要的：

解决方案3 0 2016-02-12 19:04:36

解决方案4 0 2016-02-12 19:07:43

解决方案5 0 2016-02-12 19:09:19

解决方案1
1 已采纳 2016-02-12 19:01:20

解决方案2
0 2016-02-12 19:01:09

解决方案3
0 2016-02-12 19:04:36

解决方案4
0 2016-02-12 19:07:43

解决方案5
0 2016-02-12 19:09:19