鍍金池/ 問答/HTML5  HTML/ 請問js的圖片焦點事件和失去焦點事件應(yīng)該怎么寫？

請問js的圖片焦點事件和失去焦點事件應(yīng)該怎么寫？

需要做一個頭像選擇器，點擊圖片選擇作為頭像（點擊頭像會給他加一個邊框），這里應(yīng)該用焦點事件吧？但是我看了h5手冊，img確實支持的有獲得焦點和失去焦點事件，但是我寫的js沒效果，focus 還是 blur都不行，只有onclick可以，但是這樣的話點擊其他地方，上一個onclick事件不會消失，也沒什么用，請js大神幫我出出主意，應(yīng)該怎么寫？對了，jq我也試過，焦點事件也不行呀？

clipboard.png

回答
編輯回答
焚音

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));                
                }
            });
2017年10月24日 19:09
編輯回答
荒城

事件冒泡到body，通過target判斷是不是目標元素（圖片？？?）,不是就是“blur”

2017年7月2日 20:43
編輯回答
安若晴

有些W3C規(guī)范有的，瀏覽器并不一定支持，我這里在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>
2018年8月11日 10:10
編輯回答
空白格

直接在click里處理啊，點擊的時候當前圖片加border，其他的移除border，或者簡單粗暴點兒，把所有圖片的border都移除，然后再給當前加

2017年4月16日 12:19
編輯回答
情已空

看你的描述，應(yīng)該不是糾結(jié)圖片獲取焦點和失去焦點的事件，而是你想在選擇當前圖片的時候讓其他沒有選中的圖片移除border。

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

可以將img的active類增加border 就可實現(xiàn)你想要的效果

2017年7月11日 19:43
編輯回答
九年囚

簡單的給img外面加一個a標簽 a標簽肯定有焦點事件

2017年2月13日 09:30