通过js获得被点击元素下的文本和href属性

Question

如下面代码，如何在点击元素后，获取元素下的文本内容，和href。弹窗显示文本内容和询问是否跳转，点是跳转，点否关闭弹窗保持原样。

<div class="list"
            <a href="www.csdn1.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题1</h3>
                </div>
            </a>
            <a href="www.csdn2.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题2</h3>
                </div>
            </a>
            <a href="www.csdn3.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题3</h3>
                </div>
            </a>
            <a href="www.csdn4.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题4</h3>
                </div>
            </a>
</div>
<script>



</script>

Answer 1

jquery代码如下：

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<div class="list">
            <a href="www.csdn1.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题1</h3>
                </div>
            </a>
            <a href="www.csdn2.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题2</h3>
                </div>
            </a>
            <a href="www.csdn3.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题3</h3>
                </div>
            </a>
            <a href="www.csdn4.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题4</h3>
                </div>
            </a>
</div>
<script>
$(".list-item").click(function(event){
    if (!confirm($(this).find(".list-title").text()+"\n是否跳转？")) {
        event.preventDefault();
    }
});
</script>

原生js代码

<div class="list">
            <a href="www.csdn1.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题1</h3>
                </div>
            </a>
            <a href="www.csdn2.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题2</h3>
                </div>
            </a>
            <a href="www.csdn3.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题3</h3>
                </div>
            </a>
            <a href="www.csdn4.net" class="list-item">
                <div class="list-message">
                    <h3 class="list-title">我是标题4</h3>
                </div>
            </a>
</div>
<script>
var arr = document.querySelectorAll(".list-item");
for (var i = 0; i < arr.length; i++) {
    arr[i].addEventListener("click", function (event){
        var text = this.querySelector(".list-title").innerText;
        if (!confirm(text+"\n是否跳转？")) {
            event.preventDefault();
        }
    });
}
</script>