Как назначить несколько «событий onclick» (для кнопок HTML) одной функции, не вызывая все оценки - PullRequest
Новая
       5

Как назначить несколько «событий onclick» (для кнопок HTML) одной функции, не вызывая все оценки

0 голосов
/ 09 января 2019

Я пытался назначить события onclick для нескольких элементов HTML

. Я пытаюсь сделать как можно меньше кода, используя только одну функцию. Я знаю простой способ сделать это, добавив атрибуты событий к элементам HTML, например: 

<body>

<p id="demo1" onclick="myFunc(this)">Paragraph 1</p>
<p id="demo2" onclick="myFunc(this)">Paragraph 2</p>

<script>
function myFunc(para) {
  para.style.color = "red";
}
</script>

Но если бы я добавил много атрибутов событий к нескольким элементам HTML, HTML-документ был бы беспорядком, верно? поэтому я предпочел бы сделать код в JavaScript. Но проблема в том, что когда я назначаю код в Js и нажимаю на один из тегов

, они оба срабатывают (кстати, я очень новичок в кодировании i Js, так что, возможно, из-за моей глупости) 

<body>
<p id="demo1">Paragraph 1</p>
<p id="demo2">Paragraph 2</p>
<script>
    var x = document.getElementById("demo1").onclick = myFunc;
    var y = document.getElementById("demo2").onclick = myFunc;

    function myFunc() {
        if (x == document.getElementById("demo1").onclick) {
            document.getElementById("demo1").style.color = "red";
        } 
        if (y == document.getElementById("demo2").onclick) {
            document.getElementById("demo2").style.color = "red";
        }
    }
</script>

Ответы [ 3 ]

0 голосов
/ 09 января 2019

JQuery будет вариант. 

$(document).on('click','p',function(){
   $(this).css('color','red');
});
0 голосов
/ 09 января 2019

Вы можете положиться на объект события, чтобы определить как элемент, вызвавший функцию, так и тип события (щелчок, зависание, нажатие клавиши и т. Д.):

handleEvent({type}) { switch(type) { case "click": return require("./actions/doStuff")(/* action dates */) case "mouseenter": return this.setState({ hovered: true }) case "mouseleave": return this.setState({ hovered: false }) default: return console.warn('No case for event') } }

0 голосов
/ 09 января 2019

Попробуйте вместо этого использовать делегирование событий - назначьте слушателя для контейнера элементов, для которых вы хотите прослушивать события, а затем проверьте event.target (элемент, по которому щелкнули, который вызвал событие), чтобы увидеть если это элемент, на котором вы хотите, чтобы слушатель работал: 

document.body.addEventListener('click', ({ target }) => {
  // Only continue on `<p>` elements:
  if (!target.matches('p')) {
    return;
  }
  target.style.color = 'red';
});
<p id="demo1">Paragraph 1</p>
<p id="demo2">Paragraph 2</p>
<div>some other element that will not change on click</div>

Если вы хотите добавить слушателей к каждому отдельному элементу, отметьте this внутри слушателя, чтобы ссылаться на элемент, по которому щелкнули, и затем вы можете назначить его стиль по своему усмотрению: 

document.getElementById("demo1").onclick = myFunc;
document.getElementById("demo2").onclick = myFunc;

function myFunc() {
  this.style.color = 'red';
}
<p id="demo1">Paragraph 1</p>
<p id="demo2">Paragraph 2</p>

(вы также можете использовать параметр в myFunc, чтобы получить event, и из этого, event.target, как в первом методе)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...