Question

我试图用javascript实现一个奇怪的边缘情况，但我被卡住了。我想触发一个父母的孩子对另一个父母的孩子的点击，但是孩子应该按照dom树的顺序匹配，因此当用户单击foo2时，我需要触发对bar2的点击。 foo3将触发bar3，依此类推。

我遇到了一个额外的挑战，因为该数据是从API外部加载的，因此我无法编辑target的html

var parent = document.querySelector('.parent');
var target = document.querySelector('.target');

parent.addEventListener('click', function(e) {
  e.preventDefault;
	console.log(e.target);
  
  // clicking a .parent child would trigger a click on
  // matching child list-item in .target 
  // i.e. clicking foo2 would trigger a click on bar2
})

<div class="parent">
  <a href="#">foo1</a>
  <a href="#">foo2</a>
  <a href="#">foo3</a>
  <a href="#">foo4</a>
</div>

<ul class="target">
  <li>bar1</li>
  <li>bar2</li>
  <li>bar3</li>
  <li>bar4</li>
</ul>

Answer 1

您可以使用var parentChildren = Array.prototype.slice.call(parent.children)来获取div parent的子代

并使用var targetChildren = Array.prototype.slice.call(target.children)获取ul target的子代

然后点击parentChildren中任何元素，就会触发targetChildren中相同索引的点击

像这样：

var parent = document.querySelector('.parent');
var target = document.querySelector('.target');

var parentChildren = Array.prototype.slice.call(parent.children);
var targetChildren = Array.prototype.slice.call(target.children);

parent.addEventListener('click', function(e) {
  e.preventDefault;
  targetChildren[parentChildren.indexOf(e.target)].click()
});

// Added this listener for illustration.
target.addEventListener('click', function(e) {
  console.log(e.target);
});

<div class="parent">
  <a href="#">foo1</a>
  <a href="#">foo2</a>
  <a href="#">foo3</a>
  <a href="#">foo4</a>
</div>

<ul class="target">
  <li>bar1</li>
  <li>bar2</li>
  <li>bar3</li>
  <li>bar4</li>
</ul>

Answer 2

通常，您可以使用href="Javascript: foo()"在标记中创建触发器（其中foo可以由任何函数替换）。然后，您可以使用document.getElementsByClasses("target")[i].innerHTML并使用for循环为每个列表中的项设置ID，以为其每个名称提供与它们的名称相关的ID。在函数中，使用document.getElementById("foo")访问特定的目标列表值。您可以使用document.getElementById("foo").style.(whatever you want)

来应用事物

Answer 3

事件向上冒泡，因此您将无法通过用户的点击在同级表兄弟元素上捕获同一事件。

但是在事件侦听器内部，当用户单击时，您可以获取要单击的元素，甚至触发它的点击：

function emitEventFrom(thisObservable: boolean): Observable<string> {
    return Observable.create(function (observer: Observer<String>) {
        if (thisObservable) {
            observer.next('thisObservable')
            observer.complete()
        } else {
            // Returning Rx.Observable.of()
            of('Other observable').subscribe({
                next: (value) => observer.next(value),
                error: (error) => observer.error(error)
            })
        }
    })
}

如何在dom树中将点击事件从一个div的孩子连接到另一个div的相等计数的孩子？

3 个答案: