鍍金池/ 問答/HTML/ vue點(diǎn)擊的元素和打印出的target不符是什么情況

vue點(diǎn)擊的元素和打印出的target不符是什么情況

clipboard.png
我在 這個(gè)上面加了個(gè)test打印rtarget 但是我點(diǎn)擊的是個(gè)人中心的卻走了祝福親友
查看元素也沒問題

clipboard.png

clipboard.png

但是點(diǎn)擊個(gè)人中心打印的target 是祝福親友

clipboard.png

<template>
    <div class="fix-m">
        <div class="home-banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img class="canclick"
                             src="http://gmdeng-res.oss-cn-hangzhou.aliyuncs.com/2017/3/30/ac2bcb55-7579-4922-8139-0e450f3be3eb.jpg"
                             alt="" width="100%" height="340">
                    </div>
                    <div class="swiper-slide">
                        <img class="canclick"
                             src="http://gmdeng-res.oss-cn-hangzhou.aliyuncs.com/2017/3/30/b2cc0ed1-e74d-4afd-bc71-21f57c198317.jpg"
                             alt="" width="100%" height="340">
                    </div>
                    <div class="swiper-slide">
                        <img class="canclick"
                             src="http://gmdeng-res.oss-cn-hangzhou.aliyuncs.com/2017/3/30/a16beabc-464e-4c9a-bee1-13546b50da02.jpg"
                             alt="" width="100%" height="340">
                    </div>
                </div>
                <!-- 如果需要分頁(yè)器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要導(dǎo)航按鈕 -->
            </div>
        </div>
        <div class="home-user-profile">
            <ul>
                <li>
                    <a href="./continueLight.html" v-on:click="test">
                        <img src="../assets/img/home-nav-1.png" alt="我要供燈">
                        <p>我要供燈</p>
                    </a>
                </li>
                <li v-on:click="test">
                    <!--<a href="./wishIndex.html" v-on:click="test">-->
                        <img src="../assets/img/home-nav-2.png" alt="祝福親友">
                        <p>祝福親友</p>
                    <!--</a>-->
                </li>
                <li>
                    <a href="invite/inviteIntro.html">
                        <img src="../assets/img/home-nav-3.png" alt="邀請(qǐng)供燈">
                        <p>邀請(qǐng)供燈</p>
                    </a>
                </li>
                <li>
                    <a href="lamptop/.html">
                        <img src="../assets/img/home-nav-4.png" alt="功德榜">
                        <p>功德榜</p>
                    </a>
                </li>
                <li>
                    <a href="templelist/templelist.html">
                        <img src="../assets/img/home-nav-5.png" alt="更多寺觀">
                        <p>更多寺觀</p>
                    </a>
                </li>
                <li  v-on:click="test">
                    <!--<a href="javascript:;" >-->
                        <img src="../assets/img/home-nav-6.png" alt="個(gè)人中心">
                        <p>個(gè)人中心</p>
                    <!--</a>-->
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Home',
        methods: {
           test:function (e) {
               console.log(e)
           }
        }
    }
</script>
回答
編輯回答
玩控

e.currentTarget試試?

2017年1月6日 17:03
編輯回答
不討囍

e.target 指向的是點(diǎn)擊的那個(gè)元素,而這個(gè)元素可能是綁定了事件的 dom 元素的子元素。
e.currentTarget 指向的是綁定了事件的那個(gè) dom 元素。

2017年11月7日 19:12
編輯回答
懷中人

vue 訪問原生dom,用event.currentEvent。你在@click的時(shí)候要傳入?yún)?shù)$event.
這樣v-on:click="test($event)".
test:function(event){
var target = event.currentEvent;
console.log(target);
}

2018年5月26日 20:13
編輯回答
離觴

因?yàn)橛衋標(biāo)簽,點(diǎn)了有a標(biāo)簽的鏈接后,js不會(huì)執(zhí)行,如果你需要拿到點(diǎn)擊的參數(shù),就需要禁用a標(biāo)簽,可以這樣href="javascript:void(0);",當(dāng)前你也可以完全使用a標(biāo)簽,但是不要同時(shí)使用。

2018年3月23日 05:39