开发者

jQuery text selection event

I have the following event handling code:

$('#main').delegate('.slide', 'click', function () {
  slideshow.next();
});
$('#main').delegate('a', 'click', function (e) {
  e.stopPropagation();
});

.slide is a large div with content. slideshow.next() is called when .slide is clicked, except when a link is clicked, in which case stopPropagation(), and .slide never receives the click event.

I'd like to make it possible to select text on the slide. At the moment, if I click and drag, when I release the mouse the selection works but .slide registers the click and fires the slideshow.next() function. Is there an event I can intercept?

The page is available here.


Edit: Interestingly, if the selection spans more than one HTML element, click isn't fired, but it the selection is within an element, it is fired.


Edit2: Ok, here's my solution:

function setupHandlers() {
  var prevX = 0;
  var prevY = 0;

  $('#main').delegate('.slide', 'click', function (e) {
    var clickTolerance = 2;
    var dx = Math.abs(e.pageX - prevX);
    var dy = Math.abs(e.pageY - prevY);
    //if mouse has moved less than two pixels in any direction this is a click
    if (dx < clickTolerance && dy < clickTolerance) {
      slideshow.next();
    }
  });
  $('#main').delegate('.slide', 'mousedown', function (e) {
    prevX = e.pageX;
    prevY = e.pageY;
  });开发者_运维技巧
  $('#main').delegate('a', 'click', function (e) {
    //Clicks on links shouldn't fire '.slide'.click() above
    e.stopPropagation();
  });
}


What is the difference between a single click and a click that selects text ?

I would say it could either relate to the time passed between the down click and the upclick of the mouse. Alternatively and perhaps more importantly it could be diagnosed by difference in the screen position of the mouse at the time of the down click and at the time of the mouse up event.

When the mouseDown event is fired record the event.pageX and event.pageY values. When the mouseUp event is fired compare the stored x,y coords with the current. If they are different it was a text select... do nothing. If they are the same, swap your page.

Not sure how to implement this in JScript unfortunately ;)


use $('.slide').select to catch the selection event and stop propagation.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜