3

我目前正在尝试制作button一个梯形形状的。我找到了一种创建形状的方法，其中涉及 CSS 制作边框等。CSS 方法的工作方式与它制作形状的方式相同，但我遇到了一个问题，即整个元素都包含在一个矩形中，因此当您单击梯形外部的空白区域时，它仍会注册为单击元素。

简而言之，我试图使 HTML 元素成为梯形的形状，而不仅仅是可见的形状本身。因此，当用户单击按钮周围在可见梯形之外但可能在按钮矩形的实际边界内的任何区域时，它应该忽略单击。谢谢。

编辑：有人要求我举一个例子来说明我的意思。 http://jsfiddle.net/MichaelMitchell/aR72g/9/ 在这个链接中，有红色梯形，但是你可以看到背景颜色也是绿色的，当你点击绿色时它仍然会激活一个onclick. 换句话说，我只希望红色能够触发 onclick。

4

2 回答 2

2

如果您不愿意使用涉及map属性和图像的技巧（请参阅文档），那么您不能在 HTML 中拥有除矩形之外的其他可点击区域，但即便如此，您的图像仍将始终包裹在矩形边界框中（因此您只能假装具有不同的形状通过使用具有透明度的图像并表示map）。

于 2012-11-20T23:09:00.347 回答
1

You can work around this by giving it an onmousemove event that determines whether or not that coordinate is actually inside the trapezoid and adds/removes the onclick event accordingly. Something like this:

<figure id ="trapezoid" onmousemove="trapezoidMouseMove(event)">

<p>Button</p>
</figure>

<script>
function trapezoidClick(e)
{
    //Whatever you need it to do
    alert("inside");
}

    function trapezoidMouseMove(e)
    {
        //Fill in the angle of your trapezoid
        angle = Math.PI / 4;
        insideLeft = e.offsetX > Math.tan(angle) * e.offsetY;
        insideRight = e.offsetX < e.toElement.offsetWidth - Math.tan(angle) * e.offsetY;
        if (insideLeft && insideRight)
        {
            e.toElement.style.cursor = "pointer";
            e.toElement.onclick = trapezoidClick;
        }else{
            e.toElement.style.cursor = "default";
            e.toElement.onclick = null;
        }
    }
</script>
于 2015-04-23T19:46:49.637 回答