javascript - 增加无序列表中图像的可点击区域

Question

这个问题是几天前为我回答的一个问题的后续问题 here 。我跟进了今天的问题，但不幸的是尚未得到答复，我不知道如何解决。

        document.addEventListener("click", function(e) {
            var target = e.target;

            // If not one of the `li` items, ignore it
            if (!target.tagName.toLowerCase() === "li") {
                return;
            }

            // If it doesn't have a data-src, ignore it
            var newSrc = target.getAttribute("data-src");
            if (!newSrc) {
                return;
            }

            // IN this case, we know exactly how the DOM is layed out
            // and that the parent we want is two levels up.
            // Looping through this is sometimes a better idea.
            var parentDiv = target.parentNode.parentNode.parentNode;

            var img = parentDiv.getElementsByTagName("img")[0];
            console.log(img);

            img.src = newSrc;         
        });

     

.colours {
    background-color: #f5f5f5;
}

ul {
	list-style: none;
}

li {
    display: inline;
}

li img {
	height: 50px;
    border-radius: 25px;
}

<div class="main-img"> 
        <img src="http://i.imgur.com/DxkuRlE.jpg" height="50%" width="50%">
      </div> 
      <div class="colours">
        <ul>
          <li data-src="http://i.imgur.com/DxkuRlE.jpg"><img src="http://i.imgur.com/doLMeIi.jpg"></li>
          <li data-src="http://i.imgur.com/fnWJNDi.jpg"><img src="http://i.imgur.com/GcGpWy5.jpg"></li>
          <li data-src="http://i.imgur.com/xt6cysI.jpg"><img src="http://i.imgur.com/AWCzo9N.jpg"></li>
          <li data-src="http://i.imgur.com/GEcT7Hn.jpg"><img src="http://i.imgur.com/yTeF0qu.jpg"></li>
          <li data-src="http://i.imgur.com/iWRara7.jpg"><img src="http://i.imgur.com/i35OBvT.jpg"></li>
        </ul>
        <ul>
          <li data-src="http://i.imgur.com/OgbJcRe.jpg">"Red"</li>
          <li data-src="http://i.imgur.com/duO7fk0.jpg">"Grey/White"</li>
          <li data-src="http://i.imgur.com/j74Up5A.jpg">"Green"</li>
          <li data-src="http://i.imgur.com/kjFduEb.jpg">"Black"</li>
          <li data-src="http://i.imgur.com/jHaxFe7.jpg">"Off White"</li>
        </ul>

通过单击颜色应该可以更改主图像。在第一行中，我使用图像作为列表项。它似乎“覆盖”了可点击区域。我必须单击图像外部(左下或右下)才能更改主图像。

虽然第二行仅使用文本而不是图像，但所有这些都是可点击的，并可以继续更改主图像。

我的问题如下，如何增加图像的可点击区域或以某种方式阻止图像“覆盖”可点击区域？

这个fiddle显示我正在尝试实现的代码。

谢谢，贾吉。

Answer 1

尝试以下更改。问题是你的 js 正在检查 li 目标，但图像目标正在返回 img 元素。更新了 fiddle - https://jsfiddle.net/p8dcaqmn/7/

完整的 html(为主图像添加了 id)

<div class="main-img"> 
        <img src="http://i.imgur.com/DxkuRlE.jpg" height="50%" width="50%" id="mainImg">
      </div> 
      <div class="colours">
        <ul>
          <li data-src="http://i.imgur.com/DxkuRlE.jpg"><img src="http://i.imgur.com/doLMeIi.jpg"</li>
          <li data-src="http://i.imgur.com/fnWJNDi.jpg"><img src="http://i.imgur.com/GcGpWy5.jpg"></li>
          <li data-src="http://i.imgur.com/xt6cysI.jpg"><img src="http://i.imgur.com/AWCzo9N.jpg"></li>
          <li data-src="http://i.imgur.com/GEcT7Hn.jpg"><img src="http://i.imgur.com/yTeF0qu.jpg"></li>
          <li data-src="http://i.imgur.com/iWRara7.jpg"><img src="http://i.imgur.com/i35OBvT.jpg"></li>
        </ul>
        <ul>
          <li data-src="http://i.imgur.com/OgbJcRe.jpg">"Red"</li>
          <li data-src="http://i.imgur.com/duO7fk0.jpg">"Grey/White"</li>
          <li data-src="http://i.imgur.com/j74Up5A.jpg">"Green"</li>
          <li data-src="http://i.imgur.com/kjFduEb.jpg">"Black"</li>
          <li data-src="http://i.imgur.com/jHaxFe7.jpg">"Off White"</li>
        </ul>

js

document.addEventListener("click", function(e) {
    var target = e.target;


    // If not one of the `li` items, ignore it
    if (!target.tagName.toLowerCase() === "li" || !target.tagName.toLowerCase() === "img") {
        return;
    }

    // If it doesn't have a data-src, ignore it
    var newSrc = target.getAttribute("data-src");
    if (!newSrc) {
        newSrc = target.parentNode.getAttribute("data-src");
        if (!newSrc)
            return;
    }

    // IN this case, we know exactly how the DOM is layed out
    // and that the parent we want is two levels up.
    // Looping through this is sometimes a better idea.
    var parentDiv = target.parentNode.parentNode.parentNode;

    var img = document.getElementById("mainImg");
    console.log(img);

    img.src = newSrc;         
});

css(仅 li 更改)

li {
    display: inline-block;
    cursor:pointer;
}