0

jqueryでカスタムイベントを作成するにはどうすればよいですか? セレクションドローイベントを作りたいです。このプラグインJQuery Image Annotationの [メモの追加] ボタンを自分のイベントに置き換えることができるようにします。長方形の選択領域を描画するのと同じように、注釈を直接描画できるようにしたいのですが、どうすればよいですか? ガイドしてください。

私はすでにそれを行っていますが、私の問題は、ondraw を呼び出したいカスタム イベントを定義する方法がわからないことです。つまり、知りたいのは、基本的な jquery イベントがどのように定義されているかということです。スケルトンや例は間違いなく役に立ちます。私は初心者なので、少しガイダンスが必要です。また、長方形を作成するためのコードを見つけました。コード:

     $(function(){
var $container = $('#container');
var $selection = $('<div>').addClass('selection-box');

$container.on('mousedown', function(e) {
    var click_y = e.pageY;
    var click_x = e.pageX;

    $selection.css({
      'top':    click_y,
      'left':   click_x,
      'width':  0,
      'height': 0
    });
    $selection.appendTo($container);
    $container.on('mousemove', function(e) {
        var move_x = e.pageX,
            move_y = e.pageY,
            width  = Math.abs(move_x - click_x),
            height = Math.abs(move_y - click_y);

        $selection.css({
            'width':  width,
            'height': height
        });
        if (move_x < click_x) { //mouse moving left instead of right
            $selection.css({
                'left': click_x - width
            });
        }
        if (move_y < click_y) { //mouse moving up instead of down
            $selection.css({
                'top': click_y - height
            });
        }
    }).on('mouseup', function(e) {
        $container.off('mousemove');
        $selection.remove();
    });
});

});

4

2 に答える 2

1

jQuery オブジェクトでカスタム イベントを作成することは、独自の「イベント」を作成する適切な方法として推奨されることはありませんでした。代わりに、私は常に次のいずれかを指摘されました。

  • 独自のコードでイベントをエミュレートするスクリプトの特定のブレークポイントで呼び出されるコールバックを持つ関数。
  • 一般的なイベント ハンドラーをいくつか作成し、jQuery.trigger()メソッドを使用してイベントをトリガーします。
  • イベントが既に存在する場合は、独自のイベント ハンドラーでバインドを解除して再バインドします。

コールバック関数の例

function myCustomEvent(callback)
{
    // Do something

    // If callback is a function call it
    typeof callback === 'function' && callback();
}

ずっと後になって、遥か彼方の銀河で

// You have a function that loads JS asyncronously
// but want to know each time it is fired. asyncLoad()
// Also accepts a callback as a parameter
asyncLoad('/js/myJs.js', function()
{
    console.log('myJs asyncronously loaded');

    // Script is loaded, run our event
    myCustomEvent(function()
    {
        console.log('myJs event complete');
    });
});

その例では、 asyncLoad() 関数内でカスタム イベントを発生させる方が理にかなっていますが、それがどのように機能するかを示すには、これでうまくいくと思います。

あなたのコード:

プラグインが jQuery オブジェクトで呼び出されると、イベントがそのボタンにバインドされます。おそらく「クリック」ですが、実際に発生したイベントを見つけるためにソースを調べる価値があります。

大ざっぱに見てみると、バインドを解除して再バインドするのが最善の方法のように思えます。作成したボタンの ID もわかると仮定します。(または、jQuery オブジェクトとして選択する簡単な方法があります)。

$('#createdButton').unbind('click')
    .click(function(e)
    {
        // New event handling code
    });

.onたとえば、プラグインがバブリング イベントを使用している場合、この方法は機能しない可能性があることに注意してください。その場合stopPropagation()、元のイベント ハンドラー内の要素または親に対して必要になります。またはunbind()、イベントがバインドされている低レベルの DOM 要素でも機能します。

于 2012-11-03T08:05:03.487 に答える