0

jQueryのカスタムイベントを定義するとき

$(selector).on('myevent');

のように指定すると思うのですが、
例えばclickイベントはすべてのセレクターに対してon('click')できますよね。

しかし、上記の方法だと特定のセレクターに対してしかイベントを発火させることができません。

何か方法があれば教えてください。よろしくお願いします。

例えば、このような場合です。

var flag = 0;

$(window).on(
{
  'mousedown': function()
  {
    flag = 1;
  },
  'mousemove': function()
  {
    if (flag === 1) flag = 2;
  },
  'mouseup': function()
  {
    if (flag == 2)
    {
      // ドラッグ終了時のイベント追加
      $(window).trigger('dragend');
    }

    flag = 0;
  }
});

// $(window)に対してのみ使える
$(window).on('dragend', function()
{
  console.log('ドラッグ終了');
});

// こんな風に色々な要素に適用させたい
$('.element').on('dragend', function()
{
  console.log('.elementのドラッグ終了');
});
$('#element').on('dragend', function()
{
  console.log('#elementのドラッグ終了');
});

このように色々な要素のドラッグを検知したいのですが、どのように記述すればよいのか分かりません。

0

1 件の回答 1

0

これでどうでしょうか。

'mouseup': function(event)
{
  if (flag == 2)
  {
    // ドラッグ終了時のイベント追加
    $(enent.target).trigger('dragend');
  }

  flag = 0;
}

enent.targetmouseupが発生したエレメントです。
jQuery 1.3からtrigger()したイベントはバブルアップするので、そのエレメントの親たちがdragendを受け取れます。

1
  • ありがとうございます。頭の中で整理できました。 よくよく考えたら、 drapendイベントは$(window)に対してのみ発火させればよく、 個別の要素に指定する必要はないと思いました。 個別の要素にドラッグイベントを指定する場合は、 その要素自体がドラッグ可能な場合だと思うので。
    – qsmq
    Commented 2016年11月23日 22:25

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。