正方形内的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");
}

它没有按我希望的那样工作。 从小提琴中可以看到，正方形具有彩色的边缘，然后是中心正方形。 我想做的是根据点击位置在元素上添加一个类。 例如，如果用户单击中心正方形，则它将添加中心类。 同样，如果他们单击顶部边框，则会将顶级添加到元素中。

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

更新资料

因此，现在有了A. Rama的新提琴。

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

除了中心框，这工作正常。 Naeem Shaikh建议在框内放置一个额外的div，该div不允许传播，但仍会阻止链接正常工作。 我希望使用纯javascript / jQuery解决方案，因此，如果有人能想到一个，那就太好了。

更新2

因此，由于尚未完全解释，因此创建了一个新的小提琴：

http://jsfiddle.net/wxca0o78/

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

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/

我必须注意，我之前提出的解决方案与您之前提出的问题一样是正确的，并且在这种情况下，您应批准答案并发布新的后续问题。

Answer 2

为A. Rama的答案添加更多内容，因为您需要

如果用户单击中心正方形，则它将添加中心类

http://jsfiddle.net/naeemshaikh27/aocgrp06/4/

我在框内添加了一个额外的元素Div，其中包含父级的整个高度和宽度，这成为框的中心，可用于检测对中心的单击。

<div id="box" style="border-top: 50px solid red;border-bottom: 50px solid #fc0;border-left: 50px solid blue;border-right: 50px solid green;font-size: 0px; line-height: 0%; width: 100px; height: 100px;"><div class='overlap'><div></div>


.overlap{
        background:#fff;;
        width:100px;
        height:100px;
    }

 $('.overlap').click(function(e){
        e.stopPropagation();
        alert('center');
         $(this).addClass('center');

    });

您其余的代码是正确的，只需要在代码中互换左，右，上和下