html5+javascript Feed

2018年6月 6日 (水)

マウスクリック無効化（前回の続き）

タイマーを止めたあと、マウスクリックイベントを停止するサンプルです。
onclick に null を代入しています。

----

<!DOCTYPE html>
<html>
<head>
	<title>global test timer</title>
	<meta charset="UTF-8">
	<script>
		"use strict";

	// 広域変数
		var testValue=0,timer;
		var message,addCount;	//

		// 初期化関数
		function init() {
//			alert("init");
			message = document.getElementById("message");
			message.textContent=testValue;

			addCount = document.getElementById("addCount");
//			alert(document.getElementById("addCount"));
//			alert(addCount);
//			alert("init2");


			addCount.onclick=click;

//			alert("start");

			timer = setInterval(tick, 100);
		}

		function tick(){

			if(testValue < 5){
				message.textContent=testValue;
				}else{

				message.textContent="end";
				addCount.onclick=null;

				clearInterval(timer);
			}

		}

		function click(e){
			testValue++;
			alert(testValue);	//debug
		}


	</script>
</head>
<body onload="init()">
	<button id="addCount">click test</button>
		<p id="message"></p>
</body>
</html>

--
http://www3.synapse.ne.jp/wtz/programming/html5/globalTestTimer2.html
----

投稿時刻 10時57分 html5+javascript | | コメント (0) | トラックバック (0)

|

2018年6月 4日 (月)

javascript はシングルスレッドだそうです。タイマーを使えば一応解決。

javascript はシングルスレッドだそうです。マルチスレッドではありません。
例えば下記のプログラムは期待通りの動きをしません。

----

<!DOCTYPE html>
<html>
<head>
	<title>global test</title>
	<meta charset="UTF-8">
	<script>
		"use strict";

		// 広域変数
		var testValue=0;
		var message;

		// 初期化関数
		function init() {
			message = document.getElementById("message");


			message.textContent=testValue;
//			alert("start");

			while(testValue < 5){
				sleep(1000);
				message.textContent=testValue;
			}

			message.textContent="end";
		}
	</script>
</head>
<body onload="init()">
	<button onclick="testValue++">click test</button>
	<p id="message"></p>
</body>
</html>

--

http://www3.synapse.ne.jp/wtz/programming/html5/globalTest.html

----

body の button 要素の中身を
<button onclick="testValue++;alert(testValue)">click test</button> に
書き換えてみれば、大域変数 testValue の値は変化していってるのがわかると思います。

これを解決するにはタイマーを使えばよいようです。 script の中を以下のように書き換えます。

----

	<script>
		"use strict";

		// 広域変数
		var testValue=0,timer;
		var message;

		// 初期化関数
		function init() {
			message = document.getElementById("message");


			message.textContent=testValue;
//			alert("start");

			timer = setInterval(tick, 100);
		}

		function tick(){

			if(testValue < 5){
//				sleep(1000);
				message.textContent=testValue;	//debug
			}else{

				message.textContent="end";
				clearInterval(timer);
			}

		}


	</script>

--

http://www3.synapse.ne.jp/wtz/programming/html5/globalTestTimer.html

----

実際のところ、上に書いたような alert 関数を今回も使ってみれば
testValue の値自体は増加し続けているのがわかると思います。
これを避けるには onClick を使用せず getElementById 関数を使って
onclick に関数を設定し、終わったら null を代入しなおせばいいのですが、
それは次回に。（端折って書いてるのでわかりにくくてすいません。)

投稿時刻 10時30分 html5+javascript | | コメント (0) | トラックバック (0)

|

2016年3月20日 (日)

クリックイベントのプロパティ？一覧

----
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset='UTF-8'>
</head>
<body>

<span id='t' style='color:blue; border-width:1px; border-style:solid;'>ここをクリック</span>

<div id='elements'></div>

<script type="text/javascript">
"use strict";
	var t = document.getElementById('t');
	var elements = document.getElementById('elements');

	t.onclick=click;

	function click(e){
		var	s='';

		for(var o in e){
			s+=o+' : '+e[o]+'<br />';
		}

		elements.innerHTML=s;
	}
</script>
</body>
</html>

----

ここをクリック

投稿時刻 08時23分 html5+javascript | | コメント (0) | トラックバック (0)

|

2016年3月19日 (土)

クリックしても反応しない。(FireFox)

しばらく前に買った「ゲームで学ぶ JavaScript 入門 HTML5＆CSS も身につく！」と
いう本。大変勉強になるのだが 15puzzle が初期画像は出るのだが
数字をクリックしても何も反応が出ない。

私は普段 firefox を使っているのだが、他のブラウザ、IE11,opera12.18,
Google chrome （現最新バージョン） 49.0.2623.87 m (64-bit) では動くのだが
firefox （最新バージョン）45.0 でだけ全く反応がありません。

内容は初期化関数で

----        function init() {
            var table = document.getElementById("table");

            for (var i = 0 ; i < 4 ; i++) {
                var tr = document.createElement("tr");
                for (var j = 0 ; j < 4 ; j++) {
                    var td = document.createElement("td");
                    var index = i * 4 + j;
                    td.className = "tile";
                    td.index = index;
                    td.value = index;
                    td.textContent = index == 0 ? "" : index;
                    td.onclick = click;
                    tr.appendChild(td);
                    tiles.push(td);
                }
                table.appendChild(tr);
            }

            for (var i = 0 ; i < 1000 ; i++) {
                click({ srcElement: {index: Math.floor(Math.random() * 16)}})
            }
        }
----

というふうに数字の並んだ table を作って行き、数字の書かれた枠をクリックしたら
関数 click を呼び出すというもの。
で、その中身はどうなっているかというと、頭だけ引用すると
----

         function click(e) {
            var i = e.srcElement.index;

----

となっている。

でネットで散々調べた末に
「JavaScript - ブラウザ毎のイベント発生元取得テスト」
http://tsoft-web.com/sub/tips/event/
というページにたどりつき、「クリック後、大体こんな感じで取得」のサンプルページを
表示させ、「click me」と書かれた部分をクリックすると、
「e.srcElement = not exists」とあるではないか。

そこで上に引用した 15puzzle の２ヶ所の 'srcElement' を 'target' に
書き換えたところ、まともに動くようになった。
他のブラウザでもちゃんと動くようで解決した。

なお、srcElement にしか対応していないブラウザ上でも動かすには、上の一行を

            var i = (e.srcElement ||e.target).index;


とすればよいようだ。

投稿時刻 18時56分 html5+javascript | | コメント (2) | トラックバック (0)

|