2

私はいくつかのインタラクティブな UI を作成し、サイズ変更とマウス イベントに jQuery を使用しています。

すべての要素のイベントをバインドmouseOverしてクリックし、クリックを取得したら、クリック リスナーを削除します (サイズ変更可能なリスナーに干渉しないように)。

ここまでは問題なく動作し、選択した要素のサイズを変更できるようになりました。サイズ変更の開始は正常に機能しますが、その後でもmouseup、要素のサイズ変更イベントは終了せず、マウスでサイズ変更されています。

どうしたの ？

物はここにあります。

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キーは、選択を解除するようにバインドされています。

4

1 に答える 1

1

contextMenu (mouseclick イベントをリッスンしている) は、サイズ変更終了イベント (mouseclick イベントも必要) と干渉しています。解決 ：

  $('.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");
    }
  });

私がしたことは、サイズ変更が開始されるとすぐにコンテキストメニューを破棄したため、マウスクリックイベントをリッスンしなくなりました。サイズ変更イベントが終了したら元に戻します。

于 2012-03-02T23:48:22.930 に答える