正方形内的javascript可点击区域

Question

因此，我尝试根据用户点击该区域的位置向可点击区域添加一个类。

我创建了这个例子:

http://jsfiddle.net/aocgrp06/

现在，问题出在这段代码上:

if (coordinates.x < height/2 && coordinates.x < width-coordinates.y && coordinates.x < coordinates.y) {
    alert("top triangle");
}

if (coordinates.y > width/2 && coordinates.x > width-coordinates.y && coordinates.x < coordinates.y) {
    alert("right triangle");
}

if (coordinates.x > height/2 && coordinates.x > width-coordinates.y && coordinates.x > coordinates.y) {
    alert("bottom triangle");
}

if (coordinates.y < width/2 && coordinates.x < width-coordinates.y && coordinates.x > coordinates.y) {
    alert("left triangle");
}

它没有像我希望的那样工作。正如您从 fiddle 中看到的那样，正方形有彩色边缘，然后是中心正方形。我想做的是根据点击位置为元素添加一个类。例如，如果用户点击中心方 block ，那么它将添加 center 类。同样，如果他们点击顶部边框，它会将 top 类添加到元素。

有没有人做过类似的事情？如果是这样，你能帮我找出正确的算法吗？

更新

所以，感谢 A，现在我们有了一个新的 fiddle 。拉玛。

http://jsfiddle.net/aocgrp06/5/

这工作正常，除了中心框。Naeem Shaikh 建议在框内放置一个额外的 div，它不允许传播，但它也会阻止链接的工作。我更喜欢纯 javascript/jQuery 解决方案，所以如果有人能想到一个，那就太棒了。

更新 2

所以，因为这还没有完全解释，我创建了一个新的 fiddle :

http://jsfiddle.net/wxca0o78/

这正是我目前使用的源代码。正如您在矩形上看到的，未检测到底部。如果我添加中心方 block ，我也会遇到问题。

Answer 1

你在这里:

if (coordinates.y < height/2 && coordinates.y < width-coordinates.x && coordinates.y < coordinates.x) {
   alert("top triangle");
}

if (coordinates.x > width/2 && coordinates.y > width-coordinates.x && coordinates.y < coordinates.x) {
   alert("right triangle");
}

if (coordinates.y > height/2 && coordinates.y > width-coordinates.x && coordinates.y > coordinates.x) {
   alert("bottom triangle");
}

if (coordinates.x < width/2 && coordinates.y < width-coordinates.x && coordinates.y > coordinates.x) {
   alert("left triangle");
}

http://jsfiddle.net/aocgrp06/2/

你交换了 x 和 y，x 是水平的，y 是垂直的。

编辑:

你又来了:

if(coordinates.y > 0 && coordinates.y < height
   && coordinates.x > 0 && coordinates.x < width) {
    alert("center");
}
else if (coordinates.y < height/2 && coordinates.y < width-coordinates.x && coordinates.y < coordinates.x) {
    alert("top triangle");
}
else if (coordinates.x > width/2 && coordinates.y > width-coordinates.x && coordinates.y < coordinates.x) {
    alert("right triangle");
}
else if (coordinates.y > height/2 && coordinates.y > width-coordinates.x && coordinates.y > coordinates.x) {
    alert("bottom triangle");
}
else if (coordinates.x < width/2 && coordinates.y < width-coordinates.x && coordinates.y > coordinates.x) {
    alert("left triangle");
}

http://jsfiddle.net/aocgrp06/7/

这是有效的，因为你的彩色扇区实际上是边界，所以它们在元素本身之外，因此当你点击彩色扇区时坐标要么是负值要么超过元素的高度或宽度。

编辑 2:

您知道，在发布之前，您应该确保您的原始算法是正确的。我，就像通常发生的那样，没有检查显然是什么在起作用。

但是您的条件存在缺陷，并且当您从正方形移动到矩形时它们失败时就会显示出来。

所以，这是数学上正确的代码。下次做你自己的工作。

function getQuadrant(element, coordinates) {
    var width = element[0].offsetWidth;
    var height = element[0].offsetHeight;
    var r = height / width;

    reset(element);
    $('#x').text(coordinates.x);
    $('#y').text(coordinates.y);
    $('#w').text(width);
    $('#h').text(height);
    $('#r').text(r);

    var c1 = coordinates.y < (r * coordinates.x);
    var c2 = coordinates.y < ((r * -1 *  coordinates.x) + height);

    $('#c1').text(c1);
    $('#c2').text(c2);

    if (c1 && c2) {
        console.log("top triangle");
        element.addClass('tilt-up');
    }
    else if (c1 &&  !c2) {
        console.log("right triangle");
        element.addClass('tilt-right');
    }
    else if (!c1 && !c2) {
        console.log("bottom triangle");
        element.addClass('tilt-down');
    }
    else if (!c1 && c2) {
        console.log("left triangle");
        element.addClass('tilt-left');
    }
}

http://jsfiddle.net/wxca0o78/3/

我必须指出，我之前提出的解决方案对于您之前提出的问题是正确的，在这种情况下，您应该批准答案并发布新的后续问题。