Как сделать клик по li последующим переходом на страницу, исключить определенную область клика?

Рейтинг: 0Ответов: 1Опубликовано: 17.11.2014

Здравствуйте.

Нужно сделать для li возможность перехода на страницу, но чтобы в определенной области этого li переход не делался, как сделать? 

$('.id_order_line').bind('click', function () {
    id_order_click = $(this).data('id_order_click');
    document.location.href='/order/details-'+ id_order_click +'';
});
javascript
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Решение http://jsfiddle.net/euma9Lvx/4/

HTML

<ul>
    <li>Покликай по всей длинне 1</li>
    <li>Покликай по всей длинне 2</li>
    <li>Покликай по всей длинне 3</li>
    <li>Покликай по всей длинне 4</li>
</ul>

CSS

ul li {
    border: 1px solid red;
    margin-top:10px;
    height: 25px;
    position: relative;
}

JavaScript

/*
x - координата x - верхнего левого угла
y - координата y - верхнего левого угла
width - ширина
height - высота
*/
var x = 100;
var y = 5;
var width = 200; 
var height = 15;

$('li').click(function(e){
    console.log(e)
    var x_click = e.offsetX == undefined ? e.originalEvent.layerX : e.offsetX;
    var y_click = e.offsetY == undefined ? e.originalEvent.layerY : e.offsetY;
    if ((x_click >= x) && (x_click <= (x+width)) && (y_click >= y) && (y_click <= (y + height))){
        alert('Ты попал в меня!!!! - ' +$(this).text());
    }
})