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

2

Have a look at triggering and binding here. Trigger an event in your code

// Trigger event on selection draw
$(document).trigger('onSelectionDraw')

then bind to the event

$(document).bind('onSelectionDraw', function() {
    // do stuff
});
于 2012-11-03T07:50:39.093 回答
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 回答