this fiddleにプログラムがあり、mouseup
イベントがトリガーしないことがあります。すべての要素にdraggable="false"
を入れて、マウスの機能でe.preventDefault()
を呼び出し、dragend
イベントリスナーを追加することで、ドラッグを防ぐためにできることをすべて試しました。ただし、dragend
イベントはトリガされず、マウスアップはトリガできません。どんな助けもありがとう。ドラッグが発生していないときにマウスのイベントがトリガーされない
1
A
答えて
1
、mysvg.innerHTML +=
は(discused hereのように)あなたのマウスアップイベントfiriを停止するドキュメント内のイベントリスナーを削除しますng。
insertAdjacentHTML()はDOMツリーを破壊しないので、mysvg.innerHTML +=
をsetMoveOnBoard関数でmysvg.insertAdjacentHTML('beforeend',
に置き換えると、マウスアップイベントリスナーを保持できます。
例:
function makeSVGTag(tagName, properties) {
var keys = Object.keys(properties);
var ret = "<" + tagName;
for (var i = 0; i < keys.length; i++) {
ret += " " + keys[i] + '="' + properties[keys[i]] + '"';
}
ret += "/>";
return ret;
}
function makeSVGTagContent(tagName, properties, content) {
var keys = Object.keys(properties);
var ret = "<" + tagName;
for (var i = 0; i < keys.length; i++) {
ret += " " + keys[i] + '="' + properties[keys[i]] + '"';
}
ret += ">" + content.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">") + "</" + tagName + ">";
return ret;
}
function setMoveOnBoard(color1, color2, color3, color4, symbol1, symbol2, x, y) {
mysvg.insertAdjacentHTML('beforeend', makeSVGTag("rect", {
height: 10,
width: 10,
stroke: color2,
"stroke-width": 2,
x: Number(x) + 3,
y: Number(y) + 3,
fill: color1,
class: "move move-display",
"data-index": (Number(y)/16) * 15 + Number(x)/16,
draggable: false
}));
mysvg.insertAdjacentHTML('beforeend', makeSVGTagContent("text", {
x: Number(x) + 4,
y: Number(y) + 10,
"font-family": "Verdana",
"font-size": 10,
stroke: "none",
fill: color3,
class: "move-symbol move-symbol1 move-display",
"data-index": (Number(y)/16) * 15 + Number(x)/16,
draggable: false
}, symbol1));
mysvg.insertAdjacentHTML('beforeend', makeSVGTagContent("text", {
x: Number(x) + 4,
y: Number(y) + 10,
"font-family": "Verdana",
"font-size": 10,
stroke: "none",
fill: color4,
class: "move-symbol move-symbol2 move-display",
"data-index": (Number(y)/16) * 15 + Number(x)/16,
draggable: false
}, symbol2));
}
var config = {
color1: "#f00",
color2: "#000",
color3: "#0f0",
color4: "#00f",
symbol1: ">",
symbol2: "<"
};
var mode = "add";
function toggleMove(i) {
if (getMove(i)[0]) {
mode = "remove";
getMove(i)[0].remove();
getMove(i)[1].remove();
getMove(i)[2].remove();
} else {
mode = "add";
setMoveOnBoard(config.color1, config.color2, config.color3, config.color4, config.symbol1, config.symbol2, mysvg.children[i].getAttribute("x"), mysvg.children[i].getAttribute("y"));
}
}
function changeMove(i) {
if (mode == "add") {
setMoveOnBoard(config.color1, config.color2, config.color3, config.color4, config.symbol1, config.symbol2, mysvg.children[i].getAttribute("x"), mysvg.children[i].getAttribute("y"));
} else {
if (typeof getMove(i)[0].remove == "function") {
getMove(i)[0].remove();
}
if (typeof getMove(i)[1].remove == "function") {
getMove(i)[1].remove();
}
if (typeof getMove(i)[2].remove == "function") {
getMove(i)[2].remove();
}
}
}
var mouseDown = false;
document.body.addEventListener("mouseup", function() {
mouseDown = false;
mode = "add";
});
document.body.addEventListener("dragend", function() {
mouseDown = false;
mode = "add";
});
function getMove(index) {
var ret = [, , ];
var moveList = mysvg.getElementsByClassName("move");
for (var i = 0; i < moveList.length; i++) {
if (moveList[i].getAttribute("data-index") == index) {
ret[0] = moveList[i];
}
}
moveList = mysvg.getElementsByClassName("move-symbol1");
for (var i = 0; i < moveList.length; i++) {
if (moveList[i].getAttribute("data-index") == index) {
ret[1] = moveList[i];
}
}
moveList = mysvg.getElementsByClassName("move-symbol2");
for (var i = 0; i < moveList.length; i++) {
if (moveList[i].getAttribute("data-index") == index) {
ret[2] = moveList[i];
}
}
return ret;
}
function tileClick(i, e) {
e.preventDefault();
mouseDown = true;
if (i != 112) {
toggleMove(i);
}
}
function tileDrag(i, e) {
if (mouseDown && i != 112) {
changeMove(i);
}
}
window.tileClick = tileClick;
window.tileDrag = tileDrag;
for (var i = 0; i < 225; i++) {
mysvg.innerHTML += makeSVGTag("rect", {
height: 16,
width: 16,
stroke: "#888",
"stroke-width": 1,
x: (i % 15) * 16,
y: Math.floor(i/15) * 16,
fill: i % 2 ? "#eee" : "#fff",
onmousedown: 'tileClick(' + i + ', event)',
onmouseover: 'tileDrag(' + i + ', event)',
class: "tile",
"data-index": i,
draggable: false
});
}
mysvg.innerHTML += makeSVGTag("circle", {
cx: 120,
cy: 120,
r: 5,
class: "piece",
"data-index": 112,
draggable: false
});
text {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<svg width="251" height="251" id="mysvg" style="padding-left:2px;padding-top:2px;" class="board" draggable="false">
</svg>
<p>
Console:
</p>
<textarea id="evalconsole"></textarea>
<button onclick="returnstatement.innerText=eval(evalconsole.value)">
Eval!
</button>
<p id="returnstatement"></p>
・ホープ、このことができます!
+0
助けてくれてありがとう! – Aplet123
1
なぜタイルの間をクリックわからないが発火しないようにするのmouseupが発生していますが、それ自身の機能へのmouseUp funcionを移動すると、ウィンドウに追加し、イベントリスナーに設定することでこの問題を解決することができます
function mouseUp() {
console.log('mouse up');
mouseDown = false;
mode = "add";
}
document.body.addEventListener("mouseup", mouseUp);
window.mouseUp = mouseUp;
その後、タイルのonMouseUpのイベントに追加:この問題は、innerHTMLプロパティに追加してある
onmouseup: 'mouseUp()',
関連する問題
- 1. マウスが動いていないときにMouseMoveイベントが発生するのはなぜですか
- 2. mousedownイベントが発生していない
- 3. ノードビューがクリックされていないときにクリックと.MouseClickイベントが発生しない
- 4. アプリが実行されていないときにアラームが発生しない
- 5. SelectAllOptionマルチセレクションをクリックしているときにonChangeイベントがトリガーされない
- 6. Rafael.jsでマウス出力イベントが発生しない
- 7. Xamarin.iOSオーディオストリーミングが動作しない、イベントがトリガーされない
- 8. FormControl setValueが呼び出されたときにValueChangesイベントが発生しない
- 9. ViewFlipperのonTouchイベントは、子ボタンのonClickイベントが発生していないときに発生します
- 10. フォルダが追加されたときにFileWatcherがイベントを発生させない
- 11. MouseMoveイベントがChromeでトリガーされない
- 12. チェックボックスajaxイベントがトリガーされない
- 13. laravelモデル$イベントがトリガーされない
- 14. react.jsで「onDrag」イベントがトリガーされない
- 15. React JS onChangeイベントがトリガーされない
- 16. onChangeイベントがトリガーされない
- 17. Application_Errorイベントglobal.asaxがトリガーされない
- 18. Chrome FileReaderイベントがトリガーされない
- 19. ZKemKeeper:イベントがトリガーされない
- 20. フォーカスされたイベントまたはOnFocuseChangeイベントが発生しない
- 21. JQuery UIのドラッグ可能なマウスが認識されない
- 22. ドラッグしてマウスを動かすと、mouseleaveイベントが発生します。
- 23. WPF Datagrid:SelectionUnit = "Cell"のときにSelectionChangedイベントが発生しない
- 24. ボーダータッチボタン:アクティブになっているが発射イベントは発生していない
- 25. addTargetがイベントを発生させない
- 26. チェックボックスがチェックされているかチェックされていないとイベントが発生しません
- 27. DataGridView SelectionChangedイベントがグリッドがゼロのときに発生しない高さ
- 28. FolderbrowserDialogが表示された後でイベントが発生しない
- 29. IFrameCommunicator(サンドボックス)を使用しているときにtransactResponseイベントが発生しない
- 30. コードの一部でfocusoutイベントがトリガーされていない
mouseupイベントが確実に発生しているので、console.logステートメントをマウスのイベントリスナーに追加すると、これを見ることができます(この習慣によって、あなたのフィドルのメソッドよりもデバッグがはるかに簡単になります)。 dragendイベントは、要素がドラッグ可能と定義されている場合にのみトリガされます。 – bryan60
マウスアップイベントがトリガーしないタイルの間のグレーのスペースをクリックすると、問題を再現できます。 –
マウスアップイベントは、すべてのマウスが確実に起動しています。問題はコードの他の部分にあります。 – bryan60