3

私は現在button、台形の形をした を作ろうとしています。CSSで縁取りなどをする形を作る方法を見つけました。CSS メソッドは形状を作成する方法で機能しましたが、要素全体が四角形に含まれているという問題に遭遇したため、台形の外側の空白をクリックすると、それでも台形のクリックとして登録されます。エレメント。

要するに、私は HTML 要素を目に見える形だけでなく、台形の形にしようとしています。したがって、ユーザーが表示されている台形の外側にあるボタンの周囲の領域をクリックすると、ボタンの四角形の実際の境界内にある可能性があり、クリックを無視する必要があります。ありがとう。

編集：私が言いたいことの例を示すように求められました. http://jsfiddle.net/MichaelMitchell/aR72g/9/ このリンクには赤い台形がありますが、背景色も緑で、緑をクリックするとonclick. 言い換えれば、赤だけがオンクリックをトリガーできるようにしたいのです。

4

2 に答える 2

2

map属性と画像を含むトリックを実行したくない場合は、HTMLで長方形以外のクリック可能な領域を使用することはできませんが（ドキュメントを参照）、それでも画像は常に長方形の境界ボックスでラップされます（したがって、異なる形状のふりをすることしかできません）透明度のある画像を使用して言ったmap）。

于 2012-11-20T23:09:00.347 に答える
1

これを回避するには、その座標が実際に台形の内側にあるかどうかを判断する onmousemove イベントを指定し、それに応じて onclick イベントを追加/削除します。このようなもの：

<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 に答える