停止點擊圖層

我有一個圖層作爲背景，另一個坐在背景圖層上的圖層（圖標）都具有不同的功能。停止點擊圖層

當我點擊圖標時，圖標的功能起作用，它也通過背景層工作。這不是預期！如何讓點擊只能在圖標上工作，不會通過背景圖層？謝謝。

HTML

<div class="redBG"> 
    <div class="yellowIcon"></div> 
</div>

CSS

.redBG{ 
    background-color:red; 
    width: 300px; 
    height:30px; 
    z-index: 1; 
} 
.grayBG{ 
    background-color: gray; 
} 

.yellowIcon{ 
    background-color:yellow; 
    width: 20px; 
    height:20px; 
    cursor: pointer; 
    z-index:20; 
} 
.greenBG{background-color:green}

$('.redBG').click(
    function(){ 
     $(this).toggleClass('grayBG'); 
    }); 

$('.yellowIcon').click(
    function(){ 
     $(this).toggleClass('greenBG'); 
    } 
);

來源

2015-02-05 abcid d

您可以使用stopPropagation()這樣的：

$('.redBG').click(
 

 
function() { 
 
    $(this).toggleClass('grayBG'); 
 
}); 
 

 
$('.yellowIcon').click(
 

 
function (e) { 
 
    e.stopPropagation(); 
 
    $(this).toggleClass('greenBG'); 
 
});

.redBG { 
 
    background-color:red; 
 
    width: 300px; 
 
    height:30px; 
 
    z-index: 1; 
 
} 
 
.grayBG { 
 
    background-color: gray; 
 
} 
 
.yellowIcon { 
 
    background-color:yellow; 
 
    width: 20px; 
 
    height:20px; 
 
    cursor: pointer; 
 
    z-index:20; 
 
} 
 
.greenBG { 
 
    background-color:green 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="redBG"> 
 
    <div class="yellowIcon"></div> 
 
</div>

event.stopPropagation()阻止事件冒泡DOM樹。參考：http://api.jquery.com/event.stoppropagation/

對於評論的問題來解釋e在這個函數：如果您檢查所提供的鏈接到jQuery的API，你會注意到它是提供的示例如下記載：

$("p").click(function(event) { 
    event.stopPropagation(); 
    // Do something 
});

請注意，這是沒有必要明確寫function(event) - 功能在這個符號參數爲的click()事件。很多人只是傾向於用e縮短event，因爲stopPropation()只是在click(function(){});中調用function()的參數事件時被調用。

爲了說明，我剛剛在Fiddle中爲click()事件添加了控制檯日誌消息console.log(e);。當你點擊.yellowIcon，你會發現控制檯消息

Object { originalEvent=Event click, type="click", ....}

所以e只是通過click()事件對象。
如果您將click()更改爲例如hover()，控制檯消息是

Object { originalEvent=Event mouseover, type="mouseenter", ...} 
Object { originalEvent=Event mouseover, type="mouseleave", ...}

爲了進一步和更詳細的信息，您可以檢查http://api.jquery.com/category/events/event-object/

來源

2015-02-05 22:01:53

謝謝，Matthias非常感謝您的幫助！它按預期工作。你可以在這個函數中解釋'e'嗎？謝謝。 – 2015-02-06 01:33:09

@abcidd很高興我能夠幫助你。我剛剛在函數中更新了我的答案，並解釋了函數中的'e'，因爲將它作爲註釋發佈太長。 – 2015-02-06 20:47:01

非常感謝，Matthias！你的解釋非常清楚直接。 – 2015-02-09 14:01:01

更改$('.yellowIcon').click()功能：

$('.yellowIcon').click(
    function(e){ 
     e.stopPropagation(); 
     $(this).toggleClass('greenBG'); 
    } 
);

來源

2015-02-05 22:01:45

非常感謝你，傑里米！是的，它效果很好。 – 2015-02-09 13:54:59

停止點擊圖層

回答

相關問題