代码之家 › 专栏 › 技术社区 › Mordecai

如何向页面中的所有元素添加多个onclick事件

onclick jquery javascript

2

Mordecai · 技术社区 · 7 年前

我有这样的HTML代码。

<a onclick="prompt('Complete','Lorem');">Lorem</a>
<a onclick="prompt('Complete','ipsum');">ipsum</a>
<a onclick="prompt('Complete','dolor');">dolor</a>
<a onclick="prompt('Complete','sit');">sit</a>
<a onclick="prompt('Complete','amet');">amet</a>
...

<a>Lorem</a><a>ipsum</a>
如何将onclick提示事件添加到页面中的所有可单击元素?如上述代码所示。可能吗?

3 回复 | 直到 7 年前

1

3

Suba S 7 年前

function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}
document.querySelectorAll('a').forEach(item => item.addEventListener('click', userPrompt));

a {
  cursor: pointer
}

<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>

JQuery有一种实现这一点的简单方法。

function userPrompt(event){
  prompt("Complete " + event.target.innerText);
}

$('a').on('click', userPrompt);

a {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>

2

1

Keith 7 年前

正如所指出的,addEventListener是你在这里的朋友。

下面是一个简单的例子。我基本上是将eventListener添加到主体中,过滤掉任何不是链接的元素,然后显示提示,提示用户更改此元素的innerText。

document.body.addEventListener("click", (e) => {
  //lets limit to just A links
  if (e.target.tagName !== "A") return;
  const ret = prompt("Confirm", e.target.innerText);
  if (ret !== null) {
    e.target.innerText = ret;
  }
});

a {
  text-decoration: underline;
  cursor: pointer;
}

<div>Click a link to change the innerText</div>

<a>Lorem</a>
<a>ipsum</a>
<a>dolor</a>
<a>sit</a>
<a>amet</a>

3

0

gchiconi 7 年前

// select all <a> tags
document.querySelectorAll('a')
  // loop over them
  .forEach(a =>
    // append the event by calling addEventListener
    a.addEventListener('click', () => window.prompt('Complete', 'Lorem')))

这个 forEach

const promptValue = [
  'Lorem',
  'ipsum',
  'dolor',
  'sit',
  'amet'
]

document.querySelectorAll('a').forEach((a, i) =>
  a.addEventListener('click', () => window.prompt('Complete', promptValue[i])))

编辑: 剧本

HTML :

<a data-prompt="Lorem">Lorem</a>
<a data-prompt="ipsum">ipsum</a>
<a data-prompt="dolor">dolor</a>
<a data-prompt="sit">sit</a>
<a data-prompt="amet">amet</a>

:

document.querySelectorAll('a').forEach(a =>
  a.addEventListener('click', () => window.prompt('Complete', a.dataset.prompt)))