Question

我有一个简单的

<a id="eID" href="#showCSSOnlyModalElement">Element</a>。

我想基于视口/设备大小介绍一些点击功能。但是，取消绑定此单击事件会禁用<a>元素的标准可单击功能。我想保留较大视口/设备的<a>元素的默认行为。

$( window ).resize(function() {
  if ((document.documentElement.clientWidth < 700) || (screen.width < 700)){
    $('#eID').click(function(){//hideSomeOtherElements});
  }
  else {
    $('#eID').unbind('click');
  }
});

测试：

从大型桌面视口开始。 <a>工作正常。
调整大小到viewport = 500. <a>和onClick功能正常工作。
调整大型桌面视口的大小。 <a>不起作用。

我也按照jQuery文档尝试过.on / .off路由。结果相同。

请帮忙。

Answer 1

我可能不会绑定/取消绑定，我只是检查点击发生的时间：

$("#eID").click(function(e) {
  if ((document.documentElement.clientWidth < 700) || (screen.width < 700)){
    // Do something for smaller viewports

    e.preventDefault(); // Prevents default behavior of click
                        // You can also use `e.stopPropagation()` to
                        // stop the event propagating, or use
                        // `return false` to do both.
  }
  else {
    // Don't do anything, allow default behavior of click
    // (You probably don't need the `else` at all, it's just to make
    // clear you're not doing anything here.)
  }
});

这不仅更简单，而且更容易调试。

Answer 2

尝试

function callback {
    ...
}
$('#eID').bind('click', callback);
$('#eID').unbind('click', callback);

jQuery API建议您指定回调，否则可能会发生不好的事情。

Jquery取消绑定<a> tag</a>的click（）

2 个答案: