Question

所以我尝试将一个类添加到可点击区域，具体取决于用户点击该区域的位置。

我创建了这个例子：

现在，问题在于这段代码：

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");
}

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

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

更新

所以，现在我们有了一个新的小提琴，感谢 A.拉马

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

除中心框外，这个工作正常。 Naeem Shaikh 建议在框内添加一个额外的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的answer添加更多内容，因为您需要

如果用户点击中心方块，则会添加中心类

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');

    });

代码的其余部分是正确的，只需要在代码中交换左，右，顶部和底部

广场内的javascript可点击区域

2 个答案: