十字カーソル JAVASCRIPTに詳しい方

締切済

質問者：ぽむぽむた
質問日時：2015/04/23 18:51
回答数：2件

http://www.geocities.jp/javascript_hp/index.html

上記HPの十字カーソルなのですが、十字カーソルを使うとボタンや、リンクがクリックできなくなります。
できるようにするにはソースのどの部分をどのように改変すればいいのでしょうか？
JAVASCRIPTの知識が乏しいのでどなたか教えてくださると助かります。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2015/04/30 13:18

ANo1です。

反応がないので無駄なのかもしれないけど、勝手に・・・

どのような使い方をなさりたいのか不明なので適当ですが、一応ANo1の2)の方式のものを。
　※隙間は±1pxで、合計2px×2pxにしてあります。
　※要素サイズやマウス位置取得のクロスブラウザが面倒なのでjQueryを利用

（全角空白は半角に）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
#hoge { height:300px; background-color:#FFC; }
#fuga { height:400px; margin-left:200px; width:800px; background-color:#FCF; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">

$(function(){
　var id = "fuga"; //　←対象要素のＩＤ

//初期設定・カーソル作成
　var elm = $("#" + id);
　var body = $("body"), spc = 1;
　var eStart = elm.offset();
　var eEnd = {x: eStart.left + elm.innerWidth(), y: eStart.top + elm.innerHeight()};

　var c = $("<div></div>");
　c.css({ position: "absolute", top: 0, left: 0 });
　var x1 = c.clone();
　x1.css({ width: "1px", height: "1px", backgroundColor: "#F00" });
　var x2 = x1.clone(), y1 = x1.clone(), y2 = y1.clone();
　body.append(c.append(x1, x2, y1, y2));

//イベント設定
　elm.on("mousemove", cursorSet);
　if(elm != body && elm != $("document")) c.on("mousemove", cursorSet);

//カーソル表示処理
　function cursorSet(evt){
　　var x = evt.pageX + body.scrollLeft();
　　var y = evt.pageY + body.scrollTop();　

　　x1.css({ left: eStart.left, top: y, width: x - eStart.left - spc });
　　x2.css({ left: x + spc, top: y, width: eEnd.x - x - spc });
　　y1.css({ left: x, top: eStart.top, height: y - eStart.top - spc });
　　y2.css({ left: x, top: y + spc, height: eEnd.y - y - spc });
　}

//クリックテスト用アラート
$("#fuga a").click(function(){ alert("clicked"); return false;});

});
</script>
</head>

<body>

<div id="hoge">hoge</div>
<div id="fuga">
<p>fuga
<p><a href="#">click test</a>
</div>

</body>
</html>

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2015/04/24 09:51

こんにちは。

ざっと見ただけですが・・・

ご提示のカーソルは、幅1pxと高さ1pxのspan要素をposition:absoluteで表示することでカーソルに見せています。
また、他の要素の上に表示されるようにz-index:400としています。
それなので、マウスポインタの直下には常にカーソルがあることになり、クリックしたときもカーソル（span要素）をクリックしたことになってしまいます。
（要素が重なっている時は、上側にある要素をクリックしたことになります）
この結果、ご質問のようなことになっていると考えられます。

簡単に思いつく、（下に）表示されている要素をクリックできるようにするアイデアをいくつか…
1）カーソルの表示を他の要素の下にする
　（重なり順が下に表示されるので、見え方がカーソルっぽくなくなるかも…）

2）カーソルの交点を空けて、マウスポインタの直下には要素が来ないようにする。
　（↓こんなイメージでしょうか？　大きく空ける必要はないでしょう。）
　　｜
　―　―
　　｜

3）カーソルのスクリプトはそのままで、マウスクリックが発生したときに、カーソルの下にある要素をクリックしたものとしてスクリプトから別にクリックイベントを発生させる。（←少々面倒ではないかと想像します）

他にも方法はあると思いますが、とりあえずのご参考までに・・・