Question

涉及的语言：HTML，CSS，JS

上下文：我是Web开发的新手。我有两个元素互相重叠。一个是滑块，一个是div。滑块位于div上方。

代码段：

public static int[] GetFirstEvenNumbers(int count)
{
    int[] array = new int[count];

    for (int i = 1; i <= array.Length; i++)
        array[i - 1] = i * 2; 

    for (int j = 0; j < count; j++)
        Console.Write(array[j] + " ");                        

    return new int[count];         
}

public static void Main(string[] args)
{
    Console.Write(GetFirstEvenNumbers(5));
    Console.ReadKey();
}

和

tscon.exe RDP-Tcp#0 /dest:console

我需要确保当您单击滑块时，它不会单击div。我将如何去做？我已经尝试过z-index，但这似乎并没有改变任何东西。

谢谢！

Answer 1

正如我确定的那样，您现在已经确定，JavaScript中的事件默认从子级冒到父级。您需要阻止这种情况在子级发生，也称为防止传播。

使用stopPropagation函数，您可以按以下方式进行处理：

function sliderFunction(e) {
     e.stopPropagation();
}

简单。该事件将不再到达父项。

编辑

虽然停止传播是使用的正确方法，但事件侦听器的类型也必须匹配。因此，滑块和父DIV都必须具有click事件侦听器（而不是input和click）。 stopPropagation停止传播特定类型的事件。

function divFunction() {
	console.log('DIV clicked!');
}

function sliderFunction(event) {
  event.stopPropagation();
	console.log('Slider clicked!');
}

function initListeners() { 
	document.getElementById('myDiv').addEventListener('click', divFunction);
  document.getElementById('mySlider').addEventListener('click', sliderFunction); 
} 

initListeners();

/* unnecessary visual aides */

body *:not(label) {
  padding: 2rem;
  outline: 1px solid red;
  position: relative;
}

label {
  display: inline-block;
  position: absolute;
  background: #222;
  color: #fff;
  top: 0; left: 0;
}

<div id="myDiv">
  <label>#myDiv</label>
  <div id="tools">
    <label>#tools</label>
    <input type="range" id="mySlider">
  </div>
</div>

Answer 2

触发点击事件后，您还可以检查target。我以前使用过这种方法：

JSFiddle：http://jsfiddle.net/L4ck7ygo/1/

function divFunction(e) {
  if (e.target !== this) {
    return;
  } else {
    console.log('hit');
  }
}

首次加载小提琴时，单击滑块，您将看到控制台注销一些文本。若要查看它的工作原理，请删除所指向的行，然后重新运行小提琴。现在，当您单击滑块时，您将不会在控制台中看到任何记录，但是如果您单击div而不是滑块，则它将登录到控制台。

function initListeners() {
  document.getElementById("myDiv").addEventListener("click", divFunction);
  document.getElementById("mySlider").addEventListener("input", sliderFunction);
}

initListeners();

function divFunction(e) {
  console.log('Firing...') // <-- This will log on any click
  if (e.target !== this) {
    return;
  } else {
    console.log('hit'); // <-- This will NOT log except for div click
  }
}

function sliderFunction() {
  console.log('Doing stuffs...');
}

<div id="myDiv">
  <input id="mySlider" type="range" min=1 max=100 step=1>
</div>

Answer 3

更新：我的愚蠢。对于导致传播无法按预期方式运行的元素，我的排序有误。

如何确保可点击对象不会传播到错误的元素？

3 个答案: