单击事件侦听器方法不适用于特定的 div

Posted

技术标签:

【中文标题】单击事件侦听器方法不适用于特定的 div【英文标题】：click event listener method is not working on a specific div 【发布时间】：2022-01-11 03:58:00 【问题描述】：

我正在尝试向我的“学位部分 div”添加一个事件侦听器，但它不起作用，我也没有收到任何错误。我尝试了多种遍历 DOM 以到达“度数部分”div 的方法，但无济于事。

欢迎和感谢任何形式的帮助

代码：

let city = document.querySelector('#city');
let searchbtn = document.querySelector('.search-btn');
let city_name = document.querySelector('.city-name');
let temp = document.querySelector('.temp');
let feels_like = document.querySelector('.feels-like');
let humidity = document.querySelector('.humidity');
let locationIcon = document.querySelector('.weather-icon');
let checkbox = document.getElementById('celcius');
let weather_sec = document.querySelector('.weather-info');
let degree_section = weather_sec.firstElementChild;
let degree_section_span = degree_section.getElementsByTagName('span')[0];


//let wind = document.querySelector('.wind');



async function getUrl(city) 

  try 
    let theUrl = url + city + '&appid=' + apiKey;
    let response = await fetch(theUrl, 
      mode: 'cors'
    )
    let data = await response.json();
    //Get data from api and change html content based on the recieved data
    let temp_data = data.main.temp
    temp.textContent = temp_data;
    let feels_like_data = data.main.feels_like;
    feels_like.textContent = feels_like_data + "K";
    let humidity_data = data.main.humidity;
    humidity.textContent = humidity_data;
    let 
      icon
     = data.weather[0];
    locationIcon.innerHTML = `<img src="icons/$icon.png">`;

    //change K to C
    degree_section.addEventListener('click', () => 
      //logging a message just to check if it is working
      console.log("c")
    )



   catch (err) 
    let error = document.createElement('span')
    error.className = "error";
    error.textContent = "Location does not exist"
    let top_center_div = document.querySelector('.top-center')
    top_center_div.appendChild(error)
    city_name.textContent = "No city found"
  







searchbtn.addEventListener('click', (e) => 
  let cityName = city.value;
  city_name.textContent = cityName
  console.log(cityName)
  getUrl(cityName)
)
<body>


<div class="loc-container">
    <div class="location">
        <h1 class="city-name">City</h1>
        <div class="weather-icon"><img src="icons/unknown.png" /></div>
   </div>
</div>

<div class="weather-info">

    <div class="degree-section">
        <h2 class="temp">0.0</h2>
        <span>K</span>
    </div>

    <div class="info-section">
        <div class="info-flex">
            <h3 class="feels-like">0K</h3>
            <h4>Feels Like</h4>
        </div>

        <div class="info-flex">
            <h3 class="humidity">0</h3>
            <h4>Humidity</h4>
        </div>

        <div class="info-flex">
            <h3 class="wind">0</h3>
            <h4>Wind</h4>
        </div>
    </div>  
</div>




<div class="top-center">
    <div class="form">
        <input type="text" name="city" id="city" required>
        <label for="city" class="label-name"><span class="search-name">Search City...</span></label>
        
    </div>
    <!-- <i class="fas fa-search search-btn"></i> -->
    <i class="material-icons search-btn" style="font-size: 35px;">search</i>
</div>



<script src="weather.js"></script>

</body>

这就是“数据”的样子

"coord":"lon":72.8479,"lat":19.0144,"weather":["id":711,"main":"Smoke","description":"smoke","icon":"50d"],"base":"stations","main":"temp":303.14,"feels_like":303.45,"temp_min":301.09,"temp_max":303.14,"pressure":1014,"humidity":45,"visibility":2500,"wind":"speed":3.09,"deg":120,"clouds":"all":20,"dt":1638773692,"sys":"type":1,"id":9052,"country":"IN","sunrise":1638754125,"sunset":1638793848,"timezone":19800,"id":1275339,"name":"Mumbai","cod":200

提前谢谢你！

【问题讨论】：

好吧，它只在您成功获取数据时才有效，因为您使用的是getUrl 中的事件侦听器。但是，我认为这没有任何意义。为什么你只是不使用 out 函数？ 你能编辑你的问题并显示data的样子吗？ @Engin 我也试过了，但还是不行 @JackFleeting 确定！ 【参考方案1】：

我认为问题出在

let degree_section_span = degree_section.getElementsByTagName('span')[0];

因为它选择了错误的元素。尝试将其更改为

let degree_section_span = weather_sec.querySelector('.check');

看看它是否有效。您还可以将变量名称更改为更合适的名称。

编辑：

我认为这就是你想要做的。为了简单起见，我删除了与 temp 无关的所有内容：

let target = weather_sec.querySelector("div.check"),
  temp_data = data.main.temp;
temp.textContent = temp_data;

target.addEventListener('click', () => 
  cel = parseInt(temp_data) - 273.15;
  temp.textContent = cel.toFixed(2);
  temp.nextElementSibling.textContent = "C";
);

【讨论】：

感谢您的建议。但是，问题在于事件侦听器无法处理由 h2 和 span 元素组成的“degree-section”div。单击学位部分中的元素后，我希望发生一些事情，但它不起作用 @Albert 我想我明白了；您能否编辑您的问题并准确地解释您期望发生什么？ 是的！我实际上希望能够单击“度数部分”并将存储在“度数部分> h2”中的温度转换为摄氏度或开尔文。为此，我正在检查事件侦听器是否适用于学位部分 div 的元素，但它没有 @Albert 查看编辑。 首先，我非常感谢您抽出一些时间来提供帮助。我实际上不想要 div.check 但我想要 div.degree-section 因为 h2 在 div.degree-section 中。复选框在那里，因为我正在尝试一种不同的方法。您现在可以忽略 div.check 类。作为参考，我在问题中编辑了我的代码【参考方案2】：

因此，经过 48 小时的调试，我终于找出了问题所在。如果您在我的 HTML 中看到，我在底部有一个 div.top-center。由于我的 css 文件中的一些尺寸问题，div.top-center 的高度跨越了整个页面，所以基本上我所有的 div 都被包裹在 div.top-center 中，所以即使我为我的 div.degree 分配了一个点击事件-section 目标始终是 div.top-center ，这就是单击事件未显示正确输出的原因。

【讨论】：

你能edit你的答案显示最终代码吗？

以上是关于单击事件侦听器方法不适用于特定的 div的主要内容，如果未能解决你的问题，请参考以下文章

onClick() 事件适用于一个 div，但不适用于另一个。为啥？

js addeventlistener 为 dragenter 使用捕获不适用于输入元素

jQuery 事件委托不适用于某些按钮

为多个事件侦听器调用反射方法C＃

适配器--学习笔记

evently 中动态内容的事件监听器