在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 請(qǐng)問(wèn)js的圖片焦點(diǎn)事件和失去焦點(diǎn)事件應(yīng)該怎么寫(xiě)？

請(qǐng)問(wèn)js的圖片焦點(diǎn)事件和失去焦點(diǎn)事件應(yīng)該怎么寫(xiě)？

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

clipboard.png

回答
編輯回答
焚音

img本身沒(méi)有焦點(diǎn)，要想獲得焦點(diǎn)請(qǐng)?jiān)趇mg標(biāo)簽里加上tabindex屬性，讓其能夠接受輸入焦點(diǎn)，但是還是推薦用點(diǎn)擊事件來(lái)添加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，通過(guò)target判斷是不是目標(biāo)元素（圖片？？?）,不是就是“blur”

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

有些W3C規(guī)范有的，瀏覽器并不一定支持，我這里在chrome下測(cè)試img標(biāo)簽并沒(méi)有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里處理啊，點(diǎn)擊的時(shí)候當(dāng)前圖片加border，其他的移除border，或者簡(jiǎn)單粗暴點(diǎn)兒，把所有圖片的border都移除，然后再給當(dāng)前加

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

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

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

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

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

簡(jiǎn)單的給img外面加一個(gè)a標(biāo)簽 a標(biāo)簽肯定有焦點(diǎn)事件

2017年2月13日 09:30