Question

如何在es6中定位a标签的值？我不想使用jQuery

function targetEvent(e){
    e.preventDefault();
    console.log(e.target.);
}

<a href="#">test</a>

我想针对这个“测试”词。

Answer 1

将功能附加到元素的click事件。然后尝试

currentTarget.textContent

function targetEvent(e){
  e.preventDefault();
  console.log(e.currentTarget.textContent);
}

<a href="#" onclick="targetEvent(event)">test</a>

OR：使用jQuery

$('a').click(function(e){
  e.preventDefault();
  console.log($(this).text())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">test</a>

Answer 2

目标事件属性返回触发事件的元素。

请尝试以下代码。

<a href="#" onclick="targetEvent(event)">test</a>

<script>
function targetEvent(e) {
    e.preventDefault();
    console.log(e.target.text);
}
</script>

target属性获取事件最初发生的元素，与currentTarget属性相对，currentTarget属性始终引用事件侦听器触发事件的元素。

1）获取任何标签的文本：

e.target.text

2）获取标签名称：

e.target.tagName;

Answer 3

这取决于您的目标元素是什么。

对于元素的输入类型，您将使用.val()，对于锚标记，例如在您的示例中，假设您要提取“测试”文本，则将使用.text()。

如果您想要元素的全部HTML内容，甚至可以使用.html()函数。

您会看到，对于某些元素，这些函数的输出是相似的。

不要忘记，要使用这些功能，您需要确保the element you are working with is a query object。

function targetEvent(e){
  e.preventDefault();
  var target = $(e.target)
  console.log(".text()", target.text())
  console.log(".html()", target.html())
  console.log(".val()", target.val())
}

$(function(){
  $('.clickMe').on('click', targetEvent)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="clickMe" href="#">test</a>
<h3 class="clickMe"><span>inner content</span></h3>
<textarea class="clickMe">Some text</textarea>

Answer 4

在这里，我展示了一个简单的示例来显示事件目标的值。

HTML

<a href="#" id="test">test</a>

JS

let test = document.getElementById('test');
test.addEventListener("click",function(e){
   console.log(e.currentTarget.innerHTML);
})

定位标签的值

4 个答案: