Probleme mit ondblclick Event

Gateway_man · 13. März 2013

Hallo liebe Leute,

ich habe folgendes Problem:

Ich will das doppelclick event von zwei divcontainer handlen. Dafür existieren zwei javascriptfunktionen.

Der eine divcontainer befindet sich im andern divcontainer (Notwendig).

Wenn ich jetzt auf der Seite auf den "InnerDiv" Container klicke führt er erst die javafunktion aus die dem "OutterDiv" Container als Doppelklick Handler zugewiesen wurde, bevor er javascriptfunktion des "InnerDiv" Containers ausführt.

Ich habe doch nur auf den "InnerDiv" Doppelgeklickt. Warum führt er dennoch auch das doppelklickevent des übergeordneten Containers aus?! Kann man das umgehen ohne den inneren Div Container aus dem "OutterDiv" Container rauszunehmen?

So sieht die gekürzte Fassung aus:


<body>

<!==TreatmentEntity::Start==>

<div id="OutterDiv" onclick="Select(this);" ondblclick ="DetailView(this)" class="divNormal">

    <div class="span-100 tredomain">{15}</div>

    <div class="span-120"></div>

    <div class="span-right content">

	<div class="shadow"><pre>{2}</pre></div>

	<div>

	<!==TreatmentEntity::Comment::Start==>

	<div id="InnerDiv" onclick="SelectComment(this)" ondblclick="CommentDetailView(this)" class="commentContentNormal">

    <pre>{41}</pre>

    </div>

	<!==TreatmentEntity::Comment::End==>

	</div>

	</div>

</div>

<!==TreatmentEntity::End==>

</body>

LG

Gateway

Gateway_man · 14. März 2013

Das grenz ja echt schon an perversion.

Habs jetzt hinbekommen, allerdings über dein ein oder anderen Umweg. :rolleyes:

Ich frag jetzt das Objekt per Position ab um herauszufinden auf welches Element nun wirklich geklickt wurde.

Dann muss ich noch timestamps abfragen und vergleichen damit er die clickevents der übergeordneten Elemente ignorieren kann.

Ganz tooooooolllll. Da stellen sich bei mir echt die nackenhaare auf und ich weiß wieder warum ich dieses webgepunche nicht mag.

Ich meine wenn ich in einer Richtextanwendung auf einen Button klicke bekomme ich ja auch nicht den Click-Eventhandler vom Form :rolleyes: . Echt bescheuert, wer hat sich nur diesen unsinn ausgedacht. :upps


<!--

Legende:

{0} Treatment Refnr (Possible Values: any number)

{1} Treatment Name (Possible Values: any string)

{2} Treatment Description (Possible Values: any string)

{3} Treatment Timestamp (Possible Values: null or date string)

{4} Treatment CancelTimeStamp (Possible Values: null or date string)

{5} Treatment CancelText (Possible Values: any string)

{6} Treatment CancelUser (Possible Values: any string)

{7} Treatment DescriptionRTF (Possible Values: any string)

{8} Treatment Duration (Possible Values: any number)

{9} Treatment ErfAkt (Possible Values: any string)

{10} Treatment ExistsHistory (Possible Values: True, False)

{11} Treatment FlagReport (Possible Values: True, False)

{12} Treatment HasRemark (Possible Values: any integer)

{13} Treatment IsEditable (Possible Values: True, False)

{14) Treatment LastEditTimestamp (Possible Values: null or date string)

(15) Treatment TreatmentDomainName (Possible Values: any string)

(16) Treatment Status (Possible Values: -2 = NotSet, -1 = Canceled, 0 = Default, 1 = Confirmed, 2 = Closed)

(17) Treatment IsCanceled (Possible Values: True, False)

(18) Treatment Task Available (Possible Values: True, False)

(19) Treatment Dialog Text (Possible Values: any string)

(20) Treatment Goal Text (Possible Values: any string)

(21) Treatment TaskItem Status (Possible Values: -2 = NotSet, -1 = Canceled, 0 = Default, 1 = Confirmed, 2 = Closed)

(22) IsActivityDone (Possible Values: True, False)

(23) IsActivityCanceled (Possible Values: True, False)

{24} IsSelected (Possible Values: 0,1);

{30} Evalution Refnr (Possible Values: any number)

{31} Evaluation ErfAkt (Possible Values: any string)

{32} Evaluation EVTRefnr (Possible Values: any number)

{33} Evaluation InfoText (Possible Values: any string)

{34} Evaluation InfoTextWithReference (Possible Values: any string)

{35} Evaluation ORefnr (Possible Values: any number)

{36} Evaluation OTRefnr (Possible Values: any number)

{37} Evaluation PERefnr (Possible Values: any number)

{38} Evaluation Reference (Possible Values: any number)

{39} Evaluation ShortInfoText (Possible Values: any string)

{40} Evaluation Text (Possible Values: any string)

{41} Evaluation RTF Text (Possible Values: any string)

{42} Evaluation Timestamp (Possible Values: Null or DateTime-string)

{43} Evaluation User (Possible Values: any string)

Util Fields: (>= 60)

{60} Mcc Image Directory (with backslash at the end)

{61} Absolut Path to MCC Image Dir (with slash at the end)

-->

<!DOCTYPE html public "-//W3C//DTD HTML 4.0//en">

<html>

<head>

<title>

</title>

<style type="text/css">

    body {

        font-family: arial;

        font-size: 0.8em;

        color: #444;

    }


    pre 

    {

        font-family: arial;

        font-size: 15px;

        padding: 0px 0px 0px 3px;

        margin: 0px;

        color: #444;

    }


    img 

    {

        margin: 0px;

        padding: 0px;

        display: block;

    }


    .divNormal

    {

        background-color: #cee1f0;

        width:90%;

		max-width: 90%;

        padding: 5px;

        margin: 10px;

    }


    .divInFocus

    {

        background-color: #ff9c3f;

        width: 90%;

		max-width: 90%;

        padding: 5px;

        margin: 10px;

    }


    .span-icon

    {

        float: left;

        width: 16px;

        height: 16px;

        margin-right: 8px;

        background: #ccc;

    }


    .span-100 

    {

        padding: 4px;

        float: left;

        width: 100px;

    }


    .span-120

    {

        padding: 4px;

        float: left;

        width: 120px;

    }

    .span-right

    {

        padding: 4px;

        margin-left: 220px;

        width: 100%;

    }


    .shadow

    {

        border-top: 3px #eee solid;

        border-left: 3px #eee solid;

        padding: 3px;

        white-space: pre;

    }


    .content

    {

        height: 24px;

        background-color: white;

        margin-top: 3px;

        margin-left: 228px;

        padding: 0px;

        border: 1px grey solid;

    }

	.commentContentNormal

	{

	    margin-left: 228px;

        border-top: 3px #eee solid;

        border-left: 3px #eee solid;

        padding: 3px;

        white-space: pre;

		background-color: #cee1f0;

	}

	.commentContentFocus

	{

		margin-left: 228px;

		border-top: 3px #eee solid;

        border-left: 3px #eee solid;

        padding: 3px;

        white-space: pre;

		background-color: #ff9c3f;

	}

</style>

<script type="text/javascript" language="javascript">


    var focusedItem = null;

	var focusedComment = null;

	var x, y;

	var lastRaisedEvent = 0;


	function Select(sender) {

        if (focusedItem) {

            focusedItem.className = 'divNormal';

            focusedItem = null;

        }

        if (sender) {

            focusedItem = sender;

            sender.className = "divInFocus";

            document.location.href = "Http://select_" + sender.id + "/";

        }

    }

	function SelectComment(sender)

	{

		if (focusedComment) {

            focusedComment.className = 'commentContentNormal';

            focusedComment = null;

        }

        if (sender) {

            focusedComment = sender;

            sender.className = "commentContentFocus";

            //document.location.href = "Http://select_" + sender.id + "/";

        }

	}

    function DetailView(sender) {

        if (sender) {

            document.location.href = "http://detail_" + sender.id + "/";

        }

    }

    function CommentDetailView(sender) {

        if (sender) {

            document.location.href = "http://commentdetail_" + sender.id + "/";

        }

    }

    function SetRealizedState(id) {

        if (id) {

            document.location.href = "Http://realized_" + id + "/";

        }

    }

    function SetCanceledState(id) {

        if (id) {

            document.location.href = "Http://canceled_" + id + "/";

        }

    }

    function GetElementAtCursor() {

        return document.elementFromPoint(x, y);

    }

    function recordMouse(e) {

        var e = window.event;

        if (e.pageX || e.pageY) {

            x = e.pageX;

            y = e.pageY;

        }

        else if (e.clientX || e.clientY) {

            x = e.clientX + document.body.scrollLeft

			+ document.documentElement.scrollLeft;

            y = e.clientY + document.body.scrollTop

			+ document.documentElement.scrollTop;

        }

    }

    function OnDblClick(sender) {

        //debugger;

        var target = GetElementAtCursor();

        while ((target.tagName.toLowerCase() != "div" || target.id.length <= 0) && target.tagName.toLowerCase() != "body") {

            target = target.parentElement;

        }

        if (lastRaisedEvent != 0 && (new Date().getTime() - lastRaisedEvent) <= 500) 

        {

            lastRaisedEvent = new Date().getTime();

            return;

        }


        if (target) 

        {

            if (target.id.indexOf("?") !== -1) 

            {

                CommentDetailView(target);

            }

            else 

            {

                DetailView(target);

            }

        }

        lastRaisedEvent = new Date().getTime();

    }

</script>

</head>

<body onmousemove="recordMouse(this)">

<!==TreatmentEntity::Start==>

<div id="{0}" onmousedown="Select(this);" ondblclick ="OnDblClick(this)" class="divNormal">

    <div class="span-100">

        <div class="span-icon">

            <script type="text/javascript">

                if ("{11}" == "True") {

                    document.write("<img src='{61}ReportRelevant.png' />");

                } 

            </script>

        </div>

        <div class="span-icon">

            <script type="text/javascript">

                if ("{18}" == "True") {

                    if ("{22}" == "True") {

                        document.write("<img src='{61}TreatmentStateDone.png' onclick='SetRealizedState({0})' style='cursor:hand' />");

                    }

                    else {

                        document.write("<img src='{61}TreatmentStateDoneGrey.png' onclick='SetRealizedState({0})' style='cursor:hand' />");

                    }

                }

            </script>

        </div>

        <div class="span-icon">

            <script type="text/javascript">

                if ("{18}" == "True") {

                    if ("{23}" == "True") {

                        document.write("<img src='{61}TreatmentStateCancelled.png' onclick='SetCanceledState({0})' style='cursor:hand' />");

                    }

                    else {

                        document.write("<img src='{61}TreatmentStateCancelledGrey.png' onclick='SetCanceledState({0})' style='cursor:hand' />");

                    }

                }

            </script>

        </div>

        <div class="span-icon">

            <script type="text/javascript">

                if ("{10}" == "True") {

                    document.write("<img src='{61}HasHistoryItems.png' />");

                }

            </script>

        </div>

    </div>

    <div class="span-120 date">

        <b>

            <script type="text/javascript">

                var str = "{3}";

                document.write(str.substr(0, 16));

            </script>

        </b>

    </div>

    <div class="span-right header">

        <b>{1}</b><br />

        ErfAkt: {9}

    </div>

    <div class="span-100 tredomain">{15}</div>

    <div class="span-120"></div>

    <div class="span-right content">

	<div class="shadow"><pre>{2}</pre></div>

    <div>

	<!==TreatmentEntity::Comment::Start==>

	<div id="{0}?{30}" onclick="SelectComment(this)" ondblclick="OnDblClick(this)" class="commentContentNormal">

    <pre>{41}</pre>

    </div>

	<!==TreatmentEntity::Comment::End==>

	</div>

	</div>

</div>


<!==TreatmentEntity::End==>

</body>

</html>

lilith2k3 · 14. März 2013

Zum einen würde ich HTML und Javascript getrennt halten.



<div id="OutterDiv" onclick="Select(this);" ondblclick ="DetailView(this)" class="divNormal">

[/php]

Sowas ist unsauber!

Guck Dir mal:

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

an.

Oder benutze sowas wie:

jQuery

Zepto.js: the aerogel-weight jQuery-compatible JavaScript library

MooTools - a compact javascript framework

YUI Library

Zu Deinem eigentlichen Problem:

Im Grunde läßt sich das ganze über das Event-Objekt (event.target.id) lösen. Entweder ist das inner Div das target; wenn nicht, dann war es wohl das äußere. fertig.

Patrick_C64 · 15. März 2013

Hi,

onclick und ondblclick Handler geht nicht!, entweder oder! (kann sein das es im FF funktioniert!)

Ansonsten mal Eventbubbling recherchieren!

Anmelden

Probleme mit ondblclick Event

Empfohlene Beiträge

Gateway_man

Link zu diesem Kommentar

Auf anderen Seiten teilen

Gateway_man

Link zu diesem Kommentar

Auf anderen Seiten teilen

lilith2k3

Link zu diesem Kommentar

Auf anderen Seiten teilen

Patrick_C64

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de