问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问js的图片焦点事件和失去焦点事件应该怎么写？

头像
用户名
    4012030

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

    clipboard.png

    javascripthtmlcsshtml5
    阅读 7.7k
    6 个回答
    得票最新
    头像
    Dylan
      3227

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

      <div>
   <img src="">
   <img src="">
   <img src="">
</div>
      $('div img').click(function(){
  $('div img').removeClass('active');
  $(this).addClass('active');
})

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

      头像
      陌路凡歌
        7.9k21119

        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));                
                }
            });
        头像
        樊一
          76218

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

          头像
          psycho
            2266

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

            头像
            李十三
              13.6k31929

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

              头像
              墨绿青苔
                48386176

                有些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>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题