【Web前端问题】请问js的图片焦点事件和失去焦点事件应该怎么写？

Z时代
2024-01-10
分类：技术分享

需要做一个头像选择器，点击图片选择作为头像（点击头像会给他加一个边框），这里应该用焦点事件吧？但是我看了h5手册，img确实支持的有获得焦点和失去焦点事件，但是我写的js没效果，focus 还是 blur都不行，只有onclick可以，但是这样的话点击其他地方，上一个onclick事件不会消失，也没什么用，请js大神帮我出出主意，应该怎么写？对了，jq我也试过，焦点事件也不行呀？

回答：

看你的描述，应该不是纠结图片获取焦点和失去焦点的事件，而是你想在选择当前图片的时候让其他没有选中的图片移除border。

<div>
   <img src="">
   <img src="">
   <img src=""></div>

$('div img').click(function(){
  $('div img').removeClass('active');
  $(this).addClass('active');})

可以将img的active类增加border 就可实现你想要的效果

回答：

img本身没有焦点，要想获得焦点请在img标签里加上tabindex属性，让其能够接受输入焦点，但是还是推荐用点击事件来添加active

.active{
                border:1px solid red;
            }
    <div class="box">
            <ul >
                <li><img src="img/451e0f1.png"/></li>
                <li><img src="img/4caa0aa.png"></li>
                <li><img src="img/123.jpg"></li>
                <li><img src="img/2e0f7f7.png"/></li>
            </ul>
        </div>
    var imgs = document.querySelectorAll(".box img");
            imgs.forEach(function(el){
                el.onclick=function(){
                    imgs.forEach(function(el2){
                        if(el.isEqualNode(el2)){
                            if(this.classList.contains('active')){
                                this.classList.remove('active');
                        }else{
                            this.classList.add('active');
                        }
                        }else{
                            el2.classList.remove('active');
                        }
                    }.bind(this));                
                }            });

用focus的话

    <div class="box">
            <ul class="ul1">
                <li><img src="img/451e0f1.png" tabIndex="1"/></li>
                <li><img src="img/4caa0aa.png" tabIndex="1"></li>
                <li><img src="img/123.jpg" tabIndex="1"></li>
                <li><img src="img/2e0f7f7.png" tabIndex="1"/></li>
            </ul>
        </div>
    var imgs = document.querySelectorAll(".box img");
            imgs.forEach(function(el){
                el.onfocus=function(){
                    imgs.forEach(function(el2){
                        if(el.isEqualNode(el2)){
                            if(this.classList.contains('active')){
                                this.classList.remove('active');
                        }else{
                            this.classList.add('active');
                        }
                        }else{
                            el2.classList.remove('active');
                        }
                    }.bind(this));                
                }            });

回答：

直接在click里处理啊，点击的时候当前图片加border，其他的移除border，或者简单粗暴点儿，把所有图片的border都移除，然后再给当前加

回答：

事件冒泡到body，通过target判断是不是目标元素（图片？？?）,不是就是“blur”

回答：

简单的给img外面加一个a标签 a标签肯定有焦点事件

回答：

有些W3C规范有的，浏览器并不一定支持，我这里在chrome下测试img标签并没有focus事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-3.2.1.min.js" charset="utf-8"></script>
</head>
<style media="screen">
    img {
        width: 100px;
        height: 80px;
        margin: 10px;
        box-sizing: border-box;
    }
    img[class~=active]{
        border: 2px solid red;
    }
     /*支持focus事件为黄色*/
    img:focus{
        border: 2px solid yellow !important;
    }
</style>
<body>
    <div class="img-wrap">
        <img src="images/house.jpg" alt="">
        <img src="images/house.jpg" alt="">
        <img src="images/house.jpg" alt="">
    </div>
</body>
<script type="text/javascript">
$(function() {
    $(".img-wrap img").click(function() {
        if ($(this).hasClass("active")) {
            $(this).removeClass("active");
        } else {
            $(this).addClass("active").siblings().removeClass("active");
        }
    })
})
</script>
</html>