Having some trouble with jquery's on click

The problem: When I click on the Song Artist/Title, I'm expecting event.target.localName to == 'a' but its coming back as one element deeper, a span. (the section in question is inbetween the H3). Basically, I have a div that is clickable, with clickable text overtop of the div. when you click the div, it should play a song. when you click the text, it should go to another page and not play the song.

code:

<article class="song media" 
id="song_<?php echo $id; ?>"
data-id="<?php echo $id; ?>"
data-artist="<?php echo $artist; ?>"
data-title="<?php echo $title; ?>"
data-source="<?php echo $source; ?>"
data-url="<?php echo $url; ?>">


<div class="media-left listArtWrap">
	<div class="listArt playThumb" style="position:relative">
	<span style="z-index:1" class="has-tip" title="Play Song"><i class="fa fa-play-circle-o fa-3x pb"></i></span>
	<img src="<?php echo $song->images->small; ?>" onError="this.onerror=null;this.src='https://assets.hiphopvip.com/resources/img/placeholders/64_song_img.jpg';">
	</div>
</div>

<div class="media-body listMeta">
	<div class="btn-group pull-right list-item-actions">
		<button class="btn btn-listaction-sm listHeart has-tip" id="heart-<?php echo $song->song_id; ?>" title="Favorite"><i class="fa fa-heart"></i></button>					
		<button class="btn btn-listaction-sm listPlaylist has-tip" id="plus-<?php echo $song->song_id; ?>" title="Add to Playlist"><i class="fa fa-plus-square"></i></button>					

		 <div class="btn-group" role="group">
		    <button type="button" class="btn btn-listaction-sm dropdown-toggle listSongOpts" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		      <i class="fa fa-ellipsis-h"></i>
		    </button>
		    <ul class="pull-right dropdown-menu">
		      <li><a href="#">Share</a></li>
		      <li><a href="#">Download</a></li>
		    </ul>
		  </div>
	</div>
	<h3 class="media-heading">
		<a href="<?php echo base_url('song/' . $song->username . '/' . $song->song_url); ?>" class="listSongDetails">
			<span class="song-artist"><?php echo $song->song_artist; ?></span>
			<span class="song-dash">-</span> 
			<span class="song-title"><?php echo $song->song_title; ?>
				<span class="song-profeat">
					<?php if ($song->featuring != ''): ?>
						(Ft. <?php echo $song->featuring; ?>)
					<?php elseif($song->featuring === '' && $song->song_producer != ''): ?>
						(Prod. <?php echo $song->song_producer; ?>)
					<?php endif ?>
				</span>
			</span>
		</a>
	</h3>
	<span class="song-additional"><i class="fa fa-clock-o"></i> <span data-livestamp="<?php echo $song->published_date; ?>"></span> | 	<a href="<?php echo base_url('u/' . $song->username); ?>" title="<?php echo $song->username; ?>'s profile"><?php echo $song->username; ?></a></span>
	
</div>

</article>

javascript:

$('#main').on('click', '.song',function(event){
	if (event.target.localName !== 'a') {
		var song = getSongData($(this));

		if (app.current_track != song.id) {
			Player.play(song);
		} else {
			wavesurfer.playPause();
		}
			template.updatePlayButton(song);
	};
});