ここから本文です

javascriptでイベントの適用について、 [[HTML]] <script src="https://cod...

xyz********さん

2017/8/712:00:10

javascriptでイベントの適用について、

[[HTML]]

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="FCP1.js"></script>

<a id="picture2"><img

src="gazou.png" id=img2 class="menu" ></a>


[[Javascript]]
$(function () {
var elements = document.getElementsByClassName("menu");

//マウスが要素内で押されたとき発火
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("mousedown", mdown, false);
}

function mdown() {
//タッチされた画像のクローンをつくる
var id = this.parentNode.getAttribute('id');
var el = document.getElementById(id);
clone = el.cloneNode(true);
clone.id = "new"
clone.style.left = "100px"
var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(clone);
console.log("Created!")
}
});

のコードで、出来たクローンをイベントに参加させる
(出来たクローンをタッチした時に「クローンのクローン」をつくる) 方法はありますか?

※これだけだと、画像が全部重なって見えますがそこのところは気にしないでください

分かりづらい質問ですみません

なお、$(function () { を使ってますが、できれば、native javascriptを使った方法を教えてくださると分かりやすいです

閲覧数:
64
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

glo********さん

2017/8/718:12:03

書き方など一通りには定まりませんが
こんな感じにするのも一例になるかと。




<!DOCTYPE html>
<html>
<head>
<meta charset="shift_jis">
<title>Test Sample</title>
<script>
window.addEventListener("load",function(){
    //id の重複を防ぐためのカウンタ
    var cnt = 0;
    var elements = document.getElementsByClassName("menu");

    //マウスが要素内で押されたとき発火
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener("mousedown", mdown, false);
    }

    function mdown() {
        //タッチされた画像の親階層のクローンをつくる
        var clone = this.parentNode.cloneNode(true);
        clone.id = "new" + (cnt++);
        clone.style.left = "100px"
        document.body.appendChild(clone);
        //マウスが要素内で押されたとき発火
        clone.getElementsByClassName("menu")[0].addEventListener("mousedown", mdown, false);
        console.log("Created!")
    }
});
</script>
</head>
<body>
<a id="picture2"><img src="gazou.png" id=img2 class="menu" ></a>
</body>
</html>

この回答は投票によってベストアンサーに選ばれました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる