jquery可调整大小的事件没有结束 [英] jquery resizable event does not end

问题描述

我正在制作一些交互式UI并使用jquery来调整大小和鼠标事件。

i am making some interactive UI and using jquery for resize and mouse events.

我绑定mouseOver并点击所有元素的事件，当我点击时，我删除单击侦听器（以便它不会与可调整大小的侦听器相互干扰）。

I bind mouseOver and click event for all elements and when i get a click, i remove the click listener (so that it does not interefere with the resizable listeners).

这个工作正常，直到这里，现在可以调整所选元素的大小。开始调整大小工作正常，但即使在mouseup之后，元素调整大小事件也没有结束，它仍然会用鼠标调整大小。

this works fine till here, now the selected element can be resized. starting the resize works fine, but even after mouseup, the element resize event does not end, its still getting resized, with the mouse.

什么错了？

东西就在这里。

http://parth.me/builderjs/index.html

主要部分是：

var
  inspect = true,           // to disable inspect
  selected = null;          // currently selected event

function clickhandler(e) {
  console.log('click');
  if (selected != null)return;     // if some div is already selected, then return
  if (e.which == 3)return;         // if it was right click, return
  selected = $(e.target);          // selected = the element which received the click
  inspect = false;                 // disable inspection
  selected.addClass('selected');   // add SELECTED background + border
  $(window).unbind('click', clickhandler);  // remove the click listener
  $('.selected').resizable();               // make the selected element resizable
}

$(window).bind('click', clickhandler);    //bind the click event

'Esc'键被绑定以取消选择任何选择。

'Esc' key is binded to unselect any selection.

推荐答案

contextMenu（正在监听mouseclick事件）与resize end事件（它也想要鼠标点击事件）相互干扰。解决方案：

The contextMenu(which is listening to mouseclick event) is interefering with the resize end Event(which also wants the mouseclick event). Solution :

  $('.selected').resizable({
    start:function () {
      $("*").destroyContextMenu();
      console.log('resize started');
    },
    stop:function () {

      $("*").contextMenu({
          menu:'myMenu'
        },
        function (action, el, pos) {
          console.log(el);
          eval(action + '(el)');
        });
      console.log('resize stopped');
    },
    resize:function () {
      console.log("resize happened");
    }
  });

我做的是，一旦调整大小开始就破坏上下文菜单，所以它不听鼠标点击事件了。并在调整大小事件结束时将其恢复。

What i did was, destroy the context menu as soon as the resize started, so its not listening to the mouseclick event anymore. and make it back when the resize event ends.

这篇关于jquery可调整大小的事件没有结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！