JSFiddle - React, Tailwind, and code Playground

by sedran

HTML

<p id="outerScope">
    <a href="http://www.asosyalbebe.com" id="asosyalbebeLink" class="link">Asosyalbebe</a>
    <a href="http://blog.asosyalbebe.com/2013/01/jquery-giris-ve-gelisme.html" id="firstLink" class="link">jQuery Giriş ve Gelişme</a>
    <a href="http://blog.asosyalbebe.com/2013/01/bir-ses-yap.html" id="secondLink" class="link">Bir Ses Yap</a>
    <a href="http://blog.asosyalbebe.com/2012/10/winamp-jump-to-file-acilmiyor-hata-cozum.html" id="thirdLink" class="link">Winamp Jump To File Penceresi Açılmıyorsa</a>
    <a href="http://blog.asosyalbebe.com/2012/08/metro-style-uygulamalarda-hata-yakalamak.html" id="fourthLink" class="link">Metro Style Uygulamalarda Hata Yakalamak</a>
</p>

CSS

#outerScope {
    width: 500px;
    height: 500px;
    background: red;
    float: left;
}

.link {
    display: block;
    margin: 30px;
    padding: 10px;
    background: white;
    text-decoration: none;
    color: blue;
}

JavaScript

$(document).ready(function () {
    $("#outerScope").click(function () {
        alertWithId(this);
    });
    
    $("#asosyalbebeLink").click(function (event) {
        alertWithId(this);
    });
    
    $("#firstLink").click(function (event) {
        alertWithId(this);
        event.stopPropagation();
    });
    
    $("#secondLink").click(function (event) {
        alertWithId(this);
        event.preventDefault();
    });
    
    $("#thirdLink").click(function (event) {
        alertWithId(this);
        event.stopPropagation();
        event.preventDefault();
    });
    
    $("#fourthLink").click(function (event) {
        alertWithId(this);
        return false;
    });
        
    function alertWithId(e) {
        alert(e.id + " clicked!");
    }
});